HighCharts 3D柱状图如何实现柱状图逐个依次动画显示？

核心思路 #

放弃固定间隔的setInterval，改用动画完成回调触发下一个元素显示的方式，确保前一个柱状图动画完全结束后，再启动下一个的动画，从根本上避免时序混乱。

方案1：多系列柱状图逐个显示 #

如果需要实现不同系列的柱状图依次显示，可按以下步骤操作：

1. 初始化时将所有系列设为隐藏状态（visible: false）
2. 在图表load事件中，通过递归调用+动画完成回调，逐个显示系列

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            viewDistance: 25,
            depth: 40
        },
        events: {
            load: function() {
                const chart = this;
                const seriesList = chart.series;
                let currentIndex = 0;

                // 定义递归显示函数
                const showNextSeries = () => {
                    if (currentIndex >= seriesList.length) return;
                    // 显示当前系列并绑定动画完成回调
                    seriesList[currentIndex].update(
                        { visible: true },
                        true, // 启用动画
                        {
                            duration: 800, // 自定义动画时长（毫秒）
                            easing: 'easeOutQuad', // 自定义动画曲线
                            complete: function() {
                                currentIndex++;
                                showNextSeries(); // 当前动画完成后触发下一个
                            }
                        }
                    );
                };

                showNextSeries();
            }
        }
    },
    title: { text: '多系列3D柱状图逐个显示' },
    xAxis: { categories: ['分类1', '分类2', '分类3', '分类4', '分类5'] },
    yAxis: { title: { text: '数值' } },
    series: [
        { name: '系列1', data: [49.9, 71.5, 106.4, 129.2, 144.0], visible: false },
        { name: '系列2', data: [83.6, 78.8, 98.5, 93.4, 106.0], visible: false },
        { name: '系列3', data: [48.9, 38.8, 39.3, 41.4, 47.0], visible: false }
    ]
});

方案2：单系列内柱子逐个显示 #

如果需要单个系列里的每个柱子依次弹出显示，可按以下步骤操作：

1. 初始化时将系列所有数据设为0
2. 在图表load事件中，逐个更新柱子的真实数据，利用动画完成回调触发下一个柱子的动画

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            viewDistance: 25,
            depth: 40
        },
        events: {
            load: function() {
                const chart = this;
                const targetSeries = chart.series[0];
                const originalData = [49.9, 71.5, 106.4, 129.2, 144.0];
                let currentIndex = 0;

                // 定义递归显示函数
                const showNextPoint = () => {
                    if (currentIndex >= originalData.length) return;
                    // 更新当前柱子数据并绑定动画完成回调
                    targetSeries.points[currentIndex].update(
                        originalData[currentIndex],
                        true, // 启用动画
                        {
                            duration: 800,
                            easing: 'easeOutElastic',
                            complete: function() {
                                currentIndex++;
                                showNextPoint();
                            }
                        }
                    );
                };

                showNextPoint();
            }
        }
    },
    title: { text: '单系列3D柱子逐个显示' },
    xAxis: { categories: ['分类1', '分类2', '分类3', '分类4', '分类5'] },
    yAxis: { title: { text: '数值' } },
    series: [{ name: '系列1', data: [0, 0, 0, 0, 0] }]
});

关键优化点 #

• 用update方法的第三个参数配置动画细节，包括时长、曲线，确保动画符合业务需求
• 依赖动画的complete回调触发下一个元素的显示，完全保证时序准确性，不会出现重叠或提前触发的问题
• 可根据需求调整duration和easing参数，自定义动画节奏和效果

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