Highcharts修改数据点样式后调用setData触发栈溢出问题求助

问题原因 #

出现Uncaught RangeError: Maximum call stack size exceeded的核心原因是直接操作了Highcharts内部维护的series.data数组对象，之后调用setData触发系列重绘，该操作又会再次触发数据相关监听逻辑，形成无限循环，最终导致调用栈溢出。另外全局变量update的引用方式也可能在多次点击后引发上下文混乱，加重问题。

解决方案 #

• 放弃直接修改series.data和调用setData的方式，改用Highcharts官方提供的point.update()方法单独更新目标数据点，该方法仅更新指定点，不会触发整个系列的全量重绘，从根源避免循环问题。
• 移除全局变量update，通过模态框的data属性存储点击的点对象，避免上下文污染。

修改后的代码 #

// 数据点点击事件函数
function showModal(p) {  
    const point = p.point;
    const d = moment(point.x).format('M/D/YYYY H:mm');
    $('#point-date').html(d);
    $('#point-value').html(point.y);
    $('#point-flag').val(point.flag);
    // 将点击的点对象存入模态框的data属性中
    $('#pointModal').data('targetPoint', point);
    $('#pointModal').modal('show');
}

// 点击模态框保存按钮
function saveFlag() {
    // 从模态框data中取出目标点
    const targetPoint = $('#pointModal').data('targetPoint');
    if (!targetPoint) return;

    const size = targetPoint.series.data.length < 50 ? 4 : 2;
    const value = $('#point-flag').val();

    // 使用point.update()单独更新该点的属性
    targetPoint.update({
        marker: {
            radius: size,
            symbol: getSymbol(value)
        },
        colorIndex: getColorIndex(value),
        flag: value
    }, false); // 第二个参数设为false，暂时不重绘

    // 最后统一重绘一次图表
    targetPoint.series.chart.redraw();
    
    $('#pointModal').modal('hide');
    // 清除模态框中存储的点对象
    $('#pointModal').removeData('targetPoint');
}

补充说明 #

• point.update()方法可精准更新单个数据点属性，第二个参数false表示不立即重绘，最后调用chart.redraw()统一重绘，减少不必要的渲染操作。
• 通过模态框的data属性存储目标点，替代全局变量，避免多次点击后的数据混乱。
• 不再操作Highcharts内部的series.data数组，完全使用官方API进行数据更新，符合Highcharts设计规范，从根本上避免无限循环问题。

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