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

【问题标题】：Highcharts event handler after finishing redraw完成重绘后的 Highcharts 事件处理程序
【发布时间】：2018-09-17 17:14:59
【问题描述】：

我试图将 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 }
            });
        },
    }
}

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

【问题讨论】：

标签： highcharts

【解决方案1】：

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

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

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

使用 Highcharts 和 redraw 事件查看 this JSFiddle demonstration。

【讨论】：

谢谢，这可以解决无限循环。现在 chart.series 包含绑定到图表的所有初始系列。如何访问当前显示的系列子集，以便小计仅与活动系列集有关？
我已将上述问题创建为单独的问题，如果有人可以回答：stackoverflow.com/questions/52357592/…
似乎是一个单独的问题，是的。我去看看！

【解决方案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/

【讨论】：