हाईचार्ट्स

Question

हाइचरस.जेएस का उपयोग करके श्रृंखला में कुल मिलाकर श्रृंखला जोड़ें - मैं श्रृंखला श्रृंखला को किंवदंती में जोड़ना चाहता हूं (जहां यह वर्तमान में '12345' कहता है)। मुझे इतना पता है कि मुझे लेबलफॉर्मर फ़ंक्शन लिखने की ज़रूरत है, लेकिन मुझे प्रत्येक श्रृंखला की कुल योग को कैसे समेटना है, यह जानने के लिए पर्याप्त जावास्क्रिप्ट नहीं पता है। कोड नीचे है (यहां लाइव संस्करण भी है: http://jsbin.com/ukabob/8)।

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      backgroundColor: '#E9E7DC', 
      borderRadius:0, 
      margin: [0, 150, 30, 0] 
     }, 
     colors: ['#A74B59', '#46C4B7', '#EDBA70'], 
     credits: { 
      enabled: false 
     },   
     title: { 
      text: null 
     },    
     xAxis: { 
      categories: ['2013', '2014', '2015', '2016', '2017', '2018', 
       '2019', '2020', '2021', '2022'],     
      gridLineWidth:1, 
      gridLineColor: '#FFFFFF', 
      labels: { 
       style: { 
       color: '#000000' 
       }, 
       formatter: function() { 
       return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+ 
        this.value +'</div>'; 
       }, 
       y:25 
      }, 
      lineColor: '#FFFFFF', 
      tickColor: '#FFFFFF', 
      tickLength: 30 
     }, 
     yAxis: { 
      gridLineWidth:0, 
      title: { 
       text: null 
      }, 
      labels: { 
       enabled: false 
      } 
     }, 
     plotOptions: { 
      series: { 
      marker: { 
       radius: 6, 

       lineWidth: 2, 
       lineColor: null, // inherit from series 
       symbol: 'circle', 
       states: { 
        hover: { 
         fillColor: '#E9E7DC', 
         lineWidth: 2, 
         radius:6 
        } 
       } 
      }, 
      states: { 
       hover: { 
       lineWidth:4 
       } 
      } 
      } 
     }, 
     tooltip: { 
      borderWidth:0, 
      borderRadius: 0 
      }, 
     legend: { 
      borderRadius:0, 
      backgroundColor: '#FFFFFF', 
      itemMarginBottom: 7, 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top',     
      y: 30, 
      x: 2, 
      borderWidth: 0, 
      width:130, 
      symbolPadding: 10, 
      useHTML:true, 
      shadow: { 
       color: '#000', 
       width: 3, 
       opacity: 0.15, 
       offsetY: 2, 
       offsetX: 1 
      }, 
      labelFormatter: function() { 
       return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>'; 
     } 

     }, 
     series: [{ 
      name: 'Honeywell', 
      data: [700,725,750,850,950,1000,1025,1050,1050,1050] 
     }, { 
      name: 'Bombardier', 
      data: [661,758,880,990,1065,1136,1193,1241,1289,1335] 
     }, { 
      name: 'Embraer', 
      data: [747,789,839,861,890,908,984,1030,1097,1156] 
     }] 
    }); 
}); 

}); 

Answer 1

यह पता लगाया। मैंने श्रृंखला में कुल जोड़ा, फिर इसे इस। Options के साथ बुलाया।

 legend: { 
      borderRadius:0, 
      backgroundColor: '#FFFFFF', 
      itemMarginBottom: 7, 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top',     
      y: 30, 
      x: 2, 
      borderWidth: 0, 
      width:130, 
      symbolPadding: 10, 
      useHTML:true, 
      shadow: { 
       color: '#000', 
       width: 3, 
       opacity: 0.15, 
       offsetY: 2, 
       offsetX: 1 
      }, 
      labelFormatter: function() { 
       return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>'; 
     } 

     }, 
     series: [{ 
      name: 'Honeywell', 
      total: 9150, 
      data: [700,725,750,850,950,1000,1025,1050,1050,1050] 
     }, { 
      name: 'Bombardier', 
      total: 10548, 
      data: [661,758,880,990,1065,1136,1193,1241,1289,1335] 
     }, { 
      name: 'Embraer', 
      total: 9301, 
      data: [747,789,839,861,890,908,984,1030,1097,1156] 
     }] 
    }); 
}); 

Answer 2

एक अधिक सामान्य & गतिशील जवाब: नीचे अद्यतन कोड देखें

legend: { 
    labelFormatter: function() { 
     var total = 0; 
     for(var i=this.yData.length; i--;) { total += this.yData[i]; }; 
     return this.name + '- Total: ' + total; 
    } 
}