Highcharts添加带动画的点出现异常，如何实现5秒渲染效果？

问题分析 #

你当前代码的异常是因为点的入场动画时长（5秒）与图表自动重绘、x轴平移的动画时长不匹配，导致动画节奏混乱，出现视觉异常。

解决方案 #

要实现每个点5秒的平滑渲染动画，需同步点动画与图表相关动画的时长，以下是两种可行方案：

方案一：统一全局动画时长

直接在图表配置中设置全局动画时长为5秒，确保所有相关动画（点入场、图表平移）节奏一致：

Highcharts.chart('container', {
    chart: {
        animation: { duration: 5000 }, // 全局动画统一设为5秒
        events: {
            load: function () {
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(),
                        y = Math.random();
                    // 添加点时使用5秒动画配置，与全局同步
                    series.addPoint([x, y], true, true, { duration: 5000 });
                }, 5000);
            }
        }
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'Random data',
        data: (function () {
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});

方案二：手动控制动画（更精细）

如果需要单独控制点的动画效果，可先无动画添加点，再手动触发点的入场动画，同时同步图表重绘的动画时长：

Highcharts.chart('container', {
    chart: {
        events: {
            load: function () {
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(),
                        y = Math.random();
                    // 无动画添加新点，暂不重绘图表
                    var newPoint = series.addPoint([x, y], false, true, false);
                    // 给新点设置5秒的淡入动画
                    newPoint.graphic.attr({ opacity: 0 }).animate({ opacity: 1 }, { duration: 5000 });
                    // 手动触发图表重绘，同步5秒平移动画
                    series.chart.redraw({ duration: 5000 });
                }, 5000);
            }
        }
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'Random data',
        data: (function () {
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});

核心要点 #

• 必须保证点动画时长与图表重绘/平移动画时长一致，否则会出现动画冲突导致的异常视觉效果；
• setInterval的间隔需与动画时长保持相同（5秒），避免在未完成上一个动画时添加新点。

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