使用highcharts-draggable拖拽点时触发TypeError错误求助

问题场景 #

使用highcharts-draggable实现自定义拖拽功能，由于无现成方案，设置了两个关联系列：一个包含多数据点的折线系列，一个仅含单个散点的系列（用于在折线上显示特殊值），核心逻辑是限制拖拽操作仅在折线上进行。拖拽过程运行正常，但释放拖拽（drop）时，Highcharts抛出如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'chart')

错误堆栈信息：

Uncaught TypeError: Cannot read properties of undefined (reading 'chart')
    at C.update (highcharts.js?v=edf679bd:2858:69)
    at C.drop (TorqueTurnChart.tsx?t=1711529095151:134:18)
    at highcharts.js?v=edf679bd:163:31
    at Array.forEach (<anonymous>)
    at C (highcharts.js?v=edf679bd:162:64)
    at C.firePointEvent (highcharts.js?v=edf679bd:2781:17)
    at v (highcharts_modules_draggable-points.js?t=1711446888273&v=edf679bd:86:100)
    at e3.unbindDragDropMouseUp.s.passive (highcharts_modules_draggable-points.js?t=1711446888273&v=edf679bd:175:15)

原代码片段 #

dragStart: function(e: Highcharts.PointDragStartEventObject) {
                this.update({visible: false});
                this.series.addPoint({x:0, y: 0}, true);
            },
            drag: (e: Highcharts.PointDragEventObject) => {
                const {x, series, index} = e.target;
                const torqueSeries = series.linkedSeries[0];
                let y;
                for (let i = torqueSeries.xData.length - 1; i--;) {
                    if (torqueSeries.xData[i] < x) {
                        y = range(torqueSeries.xData[i], torqueSeries.xData[i + 1], torqueSeries.yData[i], torqueSeries.yData[i + 1], x);
                        break;
                    }
                }
                series.getValidPoints()[0].update({x, y}, true);
            },
            drop: (e: Highcharts.PointDropEventObject) => {
                const {x, series} = e.target;
                const torqueSeries = series.linkedSeries[0];
                let y;
                for (let i = torqueSeries.xData.length - 1; i--;) {
                    if (torqueSeries.xData[i] < x) {
                        y = range(torqueSeries.xData[i], torqueSeries.xData[i + 1], torqueSeries.yData[i], torqueSeries.yData[i + 1], x);
                        break;
                    }
                }
                series.removePoint(1, false);
                e.target.update({x, y, visible: true}, true);
                e.preventDefault();
            }

问题原因与修复方案 #

排查后确认，drop事件中的series.removePoint(1, false)是多余操作：该操作会导致后续执行e.target.update()时，目标点已脱离图表上下文，从而触发Cannot read properties of undefined (reading 'chart')错误。

移除该多余的点移除操作后，代码运行恢复正常。修正后的drop事件代码如下：

drop: (e: Highcharts.PointDropEventObject) => {
    const {x, series} = e.target;
    const torqueSeries = series.linkedSeries[0];
    let y;
    for (let i = torqueSeries.xData.length - 1; i--;) {
        if (torqueSeries.xData[i] < x) {
            y = range(torqueSeries.xData[i], torqueSeries.xData[i + 1], torqueSeries.yData[i], torqueSeries.yData[i + 1], x);
            break;
        }
    }
    e.target.update({x, y, visible: true}, true);
    e.preventDefault();
}

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