我试图让图例显示系列的分组值，并在范围更改时动态更新它。
通过更改范围，我的意思是单击范围选择器、移动导航器或放大/缩小。
我已经设法在加载图表时显示总数。但我只想显示当前所选范围的总数，而不是整个数据。
我在labelFormatter 上尝试了一个函数。我可以访问this.yData，这是所有数据。但我无法访问this.groupedData 或this.processedYData，只能获取当前数据分组。它给了我undefined。
但我想最好的方法是在events 上使用redraw 来更新图例。但即使这样，我也无法访问分组值，只能访问所有数据的总和。
这是我到目前为止所得到的小提琴：http://jsfiddle.net/3H3ac/
知道我该怎么做吗？
【问题讨论】：
标签： javascript highcharts
有几种解决方案可以实现这一点，其中之一是在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);
},
【讨论】：
您可以在图例中将 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);
});
}
【讨论】：