Fügen Sie der Legende in Highcharts die gesamte Summe hinzu.

Question

Highcharts.js verwenden - Ich möchte die Gesamtsumme zur Legende hinzufügen (wo sie derzeit '12345' steht). Ich weiß genug, dass ich eine labelFormatter-Funktion schreiben muss, aber ich weiß nicht genug JavaScript, um herauszufinden, wie man die Summe jeder Serie zusammenfasst. Code ist unten (auch Live-Version hier: 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

Ich habe es herausgefunden. Ich fügte die Summe der Serie hinzu und nannte sie dann mit dieser Option. Siehe aktualisierte Code unten:

 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

eine allgemeinere & dynamische Antwort:

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