Highcharts旭日图动态图例大数据量点击卡顿优化咨询

针对你遇到的大数据量（约500条）下点击图例卡顿的问题，核心原因是原代码中逐个调用p.update()会触发多次图表重绘，且update方法本身包含大量校验、事件触发逻辑，导致性能瓶颈。以下是几种有效的优化方案：

方案1：批量更新时关闭自动重绘，完成后手动触发 #

将所有点的更新操作放在无重绘的批量处理中，最后仅执行一次重绘，大幅减少重绘次数：

// 图例点击事件处理逻辑
legendItemClick: function () {
    var series = this.series,
        chart = series.chart,
        points = series.points;

    // 关闭自动重绘，批量更新所有点
    chart.suspendRedraw();
    points.forEach(p => {
        p.update({
            oldValue: p.value ? p.value : p.oldValue,
            value: p.value ? null : p.oldValue
        }, false); // 第二个参数设为false，不触发重绘
    });
    // 手动触发一次重绘
    chart.resumeRedraw();

    return false;
}

方案2：直接修改点属性，跳过update的额外逻辑 #

跳过update方法的复杂内部流程，直接修改点的value和oldValue属性，最后手动触发重绘：

legendItemClick: function () {
    var series = this.series,
        chart = series.chart,
        points = series.points;

    points.forEach(p => {
        if (p.value) {
            p.oldValue = p.value;
            p.value = null;
        } else {
            p.value = p.oldValue;
            // 可选：恢复后可清除oldValue，避免冗余数据
            // p.oldValue = null;
        }
    });
    // 手动触发重绘
    chart.redraw();

    return false;
}

方案3：使用series.setData批量更新数据 #

直接生成更新后的完整数据数组，调用setData方法批量更新，这是Highcharts推荐的批量数据更新方式：

legendItemClick: function () {
    var series = this.series,
        updatedData = series.data.map(p => {
            // 复制原数据并修改value字段
            var pointData = {...p.options};
            if (p.value) {
                pointData.oldValue = p.value;
                pointData.value = null;
            } else {
                pointData.value = p.oldValue;
                delete pointData.oldValue;
            }
            return pointData;
        });

    // 批量更新数据并触发一次重绘
    series.setData(updatedData);

    return false;
}

额外优化建议 #

• 关闭不必要的图表事件：如果不需要点的点击、悬停等事件，可以在配置中禁用，减少事件触发开销。
• 简化图表配置：比如关闭动画（animation: false），减少重绘时的动画渲染开销。

内容的提问来源于stack exchange，提问作者vegaelce