完成重绘后的 Highcharts 事件处理程序

Question

我试图将Y轴的总和显示为HighStock图表的副标题。 这最初是通过在"load"事件中汇总所有序列的 point.y 值来实现的，如下所示：

chart: {
events: {
load: function () {
var chart = this,
series = chart.series,
seriesSum = 0;
series.forEach(function (series) {
series.data.forEach(function (point) {
seriesSum += point.y
})
})
this.update({
subtitle: { text: 'TOTAL:  ' + seriesSum }
});
},
}
}

现在，我需要在使用导航器或范围选择器更改时间帧后重新绘制图表后更新总金额。我知道有一个"重绘"事件，但这会使我陷入无限循环。我应该参加哪个事件？

Answer 1

您可以使用redraw事件，只是不要在挂起的重绘中重绘。例如：

chart: {
events: {
redraw: function () {
this.update({
subtitle: { text: 'TOTAL:  ' + seriesSum }
}, false);
}
}
}

请注意Chart.update函数的false参数以防止进一步重绘(无限循环(。

请参阅此使用 Highcharts 和redraw事件的 JSFiddle 演示。

Answer 2

您可以在redraw事件中使用带有redraw标志update方法，但您必须设置正确的条件以免陷入无限循环：

var redrawEnabled = true;
var chart = Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
redraw: function() {
if (redrawEnabled) {
var sum = 0;
redrawEnabled = false;
Highcharts.each(this.series[0].points, function(point) {
if (point.isInside) {
sum += point.y;
}
});
this.update({
subtitle: {
text: sum
}
});
redrawEnabled = true;
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

现场演示：http://jsfiddle.net/BlackLabel/dewumkz6/