Highcharts 如何使用分组值动态更新图例？

Question

我试图让图例显示该系列的分组值，并在范围更改时动态更新它。

通过更改范围，我的意思是单击范围选择器、移动导航器或放大/缩小。

我已成功在加载图表时显示总数。但我只想显示当前所选范围的总计，而不是整个数据。

我尝试使用

labelFormatter

上的功能。我可以访问

this.yData

，这是所有数据。但我无法访问

this.groupedData

或

this.processedYData

，仅获取当前分组的数据。它给了我

undefined

。

但我认为最好的方法是在

redraw

上使用

events

来更新图例。但即使如此，我也无法访问分组值，只能访问所有数据的总计。

这是我到目前为止所得到的小提琴：http://jsfiddle.net/3H3ac/

知道我该怎么做吗？

Answer 1

有几种解决方案可以实现这一点，其中之一是在

afterSetExtremes

事件中重新渲染标签：http://jsfiddle.net/UaaZ3/

    xAxis: {
        events: {
            afterSetExtremes: function () {
                var chart = this.chart,
                    legend = chart.legend,
                    merge = Highcharts.merge;
                
                // force redraw each element in legend
                this.chart.isDirtyLegend = true;
                
                for (var i in legend.allItems) {
                    var item = legend.allItems[i];
                    
                    item.legendItem.destroy(); // destroy previous label
                    
                    item.legendItem = chart.renderer.text(
                        legend.options.labelFormatter.call(item),
                        legend.symbolWidth + legend.options.symbolPadding,
                        legend.baseline)
                    .css(merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle)) 
                    .attr({
                        align: 'left',
                        zIndex: 2
                    })
                    .add(item.legendGroup); // add new label
                }
                this.chart.redraw(false); // redraw chart, just in case
            }
        }
    },

和

labelFormatter

：

        labelFormatter: function () {
            var total = 0,
                data = this.processedYData ? this.processedYData : this.yData; // series is rendered, or first render
            for (var i = data.length; i--;) {
                total += data[i];
            };
            return this.name + '- Total: ' + total;
        },

此外，现在您正在使用 rangeSelector 中的选定选项。对您来说不幸的是，首先是渲染图例和系列，然后完成系列计算。为了避免这种情况，请删除选定的选项，然后在

chart.events.load

中使用

chart.setExtremes()

强制更新图例。

编辑：

为了防止错误，我开发了更好的解决方案，请参阅：http://jsfiddle.net/UaaZ3/3/

格式化程序：

function getLegendFormat(serie) {
    var total = 0,
        data = serie.processedYData ? serie.processedYData : serie.yData; // series is rendered, or first try?
    for (var i = data.length; i--;) {
        total += data[i];
    };
    return serie.name + '- Total: ' + total;

}

AdterSetExtremes：

    xAxis: {
        events: {
            afterSetExtremes: function () {
                var chart = this.chart,
                    legend = chart.legend;

                for (var i in legend.allItems) {
                    var item = legend.allItems[i],
                        newText = getLegendFormat(item);

                    item.legendItem.attr({ text: newText })
                }
            }
        }
    },

标签格式化程序：

        labelFormatter: function () {
            return getLegendFormat(this);
        },

Answer 2

您可以在图例中将useHTML设置为true，包括带类的格式化程序。然后捕获 setExtremes() 函数并计算值。最后，更新图例项。

setExtremes:function(){
                var series = this.series,
                    total = 0;

                $.each(series,function(i,s){
                    total = 0;
                    for (var j = s.processedYData.length; j--;) {
                        total += s.processedYData[j];
                    };
                    total = Highcharts.numberFormat(total);

                    $('div.highcharts-legend-item').eq(i).find('.total').html(total);

                });
            }

http://jsfiddle.net/3H3ac/14/