Grand Totals in HighCharts Pie Chart Legend

自古美人都是妖i 提交于 2019-12-22 08:38:20

问题


Is there a way for me to get a grand total at the end of my value column in my legend? Here is the code for my legend right here as well as the fiddle wtih it broken into two columns for the name and value of the data[] set.

legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            width: 220,
            verticalAlign: 'top',
            borderWidth: 0,
            useHTML: true,
            labelFormatter: function() {
                return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>';
            },
            title: {
                text: 'Primary',
                style: {
                    fontWeight: 'bold'
                }
            }
        }

id like the column to be something like this

Data1      2
Data2      3
Data3      2
         ---
           7

What I need to be able to do is add the dashed or preferrably solid line underneath that row and then the grand total of all of the data values. Here is my current fiddle.

http://jsfiddle.net/hAnCr/29/

thank you!


回答1:


You could hack this in by appending the total to the last legend item.

chart: {
  events: {
    load: function(event) {
      $('.highcharts-legend-item').last().append('<br/><div style="width:200px"><hr/> <span style="float:left"> Total </span><span style="float:right"> ' + total + '</span> </div>')
    }
  }
}

Fiddle here.




回答2:


I would actually add the total as another entry in the data array, with a null value and a label attribute. Something like this:

legend: {
    labelFormatter: function() {
        return this.name + ': ' + this.y_label;
    },
},
// ...
series: [{
    type: 'pie',
    data: [
        {'name': 'Real Estate', 'y': 12.55, 'y_label': 12.55},
        // ...
        {'name': 'Total', 'y': null, 'y_label': 100, 'color': 'transparent'}
    ]
}]

Fiddle here: http://jsfiddle.net/Aeon/9cZKg/1/



来源:https://stackoverflow.com/questions/16237810/grand-totals-in-highcharts-pie-chart-legend

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!