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：

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

Answer 2

您可以在图例中将useHTML设置为true，包括带类的formatter。然后捕获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/

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

2 个答案: