Add series total to legend in Highcharts

前端 未结 2 1257
甜味超标
甜味超标 2020-12-15 23:26

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 d

相关标签:
2条回答
  • 2020-12-16 00:10

    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;
       }
    }
    
    0 讨论(0)
  • 2020-12-16 00:22

    Figured it out. I added the total to the series, then called it with this.options. See updated code below:

            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]
            }]
        });
    });
    
    0 讨论(0)
提交回复
热议问题