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

Question

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

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

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

我尝试在 labelFormatter 上使用函数。我可以访问this.yData，这是所有的数据。但我无法访问 this.groupedData 或 this.processedYData，只获取当前数据分组。它给了我 undefined。

但我认为最好的方法是在 events 上使用 redraw 来更新图例。但即便如此，我也无法访问分组值，只能访问所有数据的总和。

这是我目前得到的 fiddle :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);
        },