Thêm tổng số chuỗi vào chú thích trong Highcharts

Question

Sử dụng Highcharts.js - Tôi muốn thêm tổng số chuỗi vào chú giải (nơi hiện tại đang nói '12345'). Tôi biết đủ rằng tôi cần phải viết một chức năng labelFormatter, nhưng tôi không biết đủ JavaScript để tìm ra cách tổng hợp tổng của mỗi chuỗi. Mã dưới đây (cũng có phiên bản trực tiếp tại đây: 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

Đã tìm ra. Tôi đã thêm tổng số vào chuỗi, sau đó gọi nó với this.options. Xem mã cập nhật dưới đây:

 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

Một chung chung hơn & câu trả lời động:

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