在Highcharts中添加系列总数到图例 [英] Add series total to legend in Highcharts

问题描述

使用Highcharts.js - 我想将系列总数添加到图例中（它当前表示'12345'）。我足够了解我需要编写一个labelFormatter函数，但我不知道如何总结每个系列的总数。代码如下（也可以在这里直播： http://jsbin.com/ukabob/8 ）。

Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: 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]
        }]
    });
});

});

推荐答案

更通用和动态的答案：

A more generic & dynamic answer:

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

这篇关于在Highcharts中添加系列总数到图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！