如何在Highcharts样条图两点连线绘制完成后触发回调函数？

我的样条图中有如下数据点：

我希望在两点间的连线绘制完成后调用一个回调函数。

以下是我目前的实现代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <figure class="highcharts-figure">
            <div id="container"></div>
            <div class="imFlex"></div>
        </figure>

        <style>
            .imFlex { display: flex; flex-direction: row; }
            .imFlex > h1 { border: 1px ridge black; padding: 1rem; background-color: lightgrey; font-weight: bold; margin-right: 10rem; }
        </style>
        
        <script>
            var chart;
            var isTesting = true;
            var timestamp;
        
            var options = {
                chart: {
                    events: {
                        load: function () {}
                    }
                },
                title: {
                    text: ' EVERY BET TAKEN FOR THE PAST 5 MINUTES '
                },
                xAxis: {
                    title: { text: ' TIMEFRAME FOR THE BETS ' },
                    type: 'datetime'
                },
                yAxis: {
                    title: { text: ' NUMBER OF USER BETS ' },
                },
                tooltip: { crosshairs: true, shared: true },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 2
                        }
                    },
                    series: {
                        animation: { duration: 300000 }
                    }
                },
                series: [{ name: "Random", data: [5, 8, 9, 50, 34] }]
            };

            function UpdateUI(){
                var increment = 1;
                var intervalInstance = setInterval(function(){
                    console.log(increment + " minutes passed");
                    increment++;
                    if(increment >= 5) clearInterval(intervalInstance);
                }, 60000);
            }
        
            $(document).ready(function () {
                UpdateUI();
                chart = Highcharts.chart("container", options);
            });
        </script>
    </body>
</html>

当前代码的问题是两点间连线的渲染时长并非恰好1分钟，我需要一个能在连线绘制完成后触发的回调函数，该如何实现？

要实现每段连线动画完成后触发回调，同时保证每段动画时长正好1分钟，可以通过Highcharts的动画回调事件和精准设置动画时长来实现：

1. 调整动画时长 #

将series的动画时长设置为60000ms（1分钟），这样每两个数据点之间的连线动画会恰好执行1分钟。

2. 添加动画完成回调 #

Highcharts支持两种关键的动画回调：

• animation.complete：每段连线动画完成时触发
• point.events.animationComplete：单个数据点的动画完成时触发，适合判断是否全部动画完成

修改后的核心代码 #

var options = {
    // ... 其他配置保持不变
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 2
            }
        },
        series: {
            animation: {
                duration: 60000, // 每段连线动画1分钟
                complete: function() {
                    // 每段连线绘制完成时触发的回调
                    console.log('当前线段绘制完成');
                    // 在这里执行你的业务逻辑，比如更新UI
                    updateSegmentComplete();
                }
            },
            point: {
                events: {
                    animationComplete: function() {
                        // 单个点动画完成时触发
                        console.log(`第${this.index+1}个点动画完成`);
                        // 判断是否是最后一个点，触发全部完成逻辑
                        if (this.index === chart.series[0].data.length - 1) {
                            console.log('所有线段绘制完成');
                            allSegmentsComplete();
                        }
                    }
                }
            }
        }
    },
    // ... 其他配置保持不变
};

// 单段连线完成后的业务逻辑
function updateSegmentComplete() {
    // 替换成你的实际操作，比如更新计数
    console.log('执行单段完成后的操作');
}

// 所有连线完成后的业务逻辑
function allSegmentsComplete() {
    console.log('执行全部完成后的操作');
}

同步UI更新 #

原来的UpdateUI用setInterval可能和动画不同步，现在可以将UI更新逻辑整合到回调中，确保动画完成后再执行：

var increment = 1;
function updateSegmentComplete() {
    console.log(increment + " minutes passed");
    increment++;
    if (increment >= 5) {
        console.log('所有时间段完成');
    }
}

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