Javascript Highcharts使用分组值动态更新图例

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

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

我已经设法在图表加载时显示总数。但我只想显示当前选定范围的总数，而不是整个数据的总数

我尝试了

labelFormatter

上的函数。我可以访问

这个.yData

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

this.groupedData

或

this.processedYData

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

未定义的

但我认为最好的方法是在
事件
上使用
重画
来更新图例。但即使这样，我也无法访问分组值，只能访问所有数据的总和

以下是我迄今为止得到的东西：

你知道我该怎么做吗？
你可以在图例中将useHTML设置为true，包括formatter和class。然后捕获setextrems（）函数并计算值。最后，更新图例项

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);

                });
            }

有两种解决方案可以实现这一点，其中之一是在
afterSetExtremes
事件中重新渲染标签：

和
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中的selected选项。不幸的是，首先用序列渲染图例，然后完成序列的计算。要避免这种情况，请删除所选选项，并在
chart.events.load
中使用
chart.setextrems（）
强制更新图例

编辑：

为了防止错误，我开发了更好的解决方案，请参阅：

格式化程序：

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;

}

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

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 })
                }
            }
        }
    },

标签格式：

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;

}

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

不知道为什么，但firebug在将鼠标移到图例上时会触发一个类型错误。它只发生在改变范围之后。但它并没有打破图表，所以我忽略了它。除此之外，它工作得很好。谢谢。请参阅更新的答案-另一种方法，错误不再出现。缩放选择器有点问题。尝试单击不同的范围，在某个点它开始显示奇数值。