AJAX获取数据后，如何实现Highcharts图表逐个即时展示？

你的问题核心在于同步循环阻塞了浏览器重绘——原来的$.each会一次性把所有图表的创建逻辑跑完，浏览器要等这个同步任务全部结束才会更新页面，所以用户得等到100个图表都构建完才能看到内容。要实现逐个显示，关键是把每个图表的创建任务拆分成异步执行，给浏览器留出重绘时间。

具体实现方式 #

方式1：递归逐个处理（推荐，更可控）

通过递归函数遍历数据，每次只处理一个图表，完成后再触发下一个，利用requestAnimationFrame确保浏览器先完成当前重绘再执行下一个任务：

$.ajax({
    url: backend_URL,
    dataType: 'json',
    success: function(data) {
        var container = $('#charts');
        var currentIndex = 0;

        function renderNext() {
            // 终止条件：所有数据处理完成
            if (currentIndex >= data.length) return;

            var item = data[currentIndex];
            // 1. 先创建图表容器并添加到页面，此时浏览器可以先渲染空容器（或加加载提示）
            var chartContainer = $('<div class="chart-item"></div>').appendTo(container);
            // 2. 初始化Highcharts图表（根据item类型选择饼图/柱状图）
            Highcharts.chart(chartContainer[0], {
                chart: {
                    type: item.chartType === 'pie' ? 'pie' : 'column'
                },
                title: {
                    text: item.title
                },
                series: item.seriesData
                // 其他Highcharts配置项根据需求补充
            });

            currentIndex++;
            // 让浏览器先完成当前页面重绘，再处理下一个图表
            requestAnimationFrame(renderNext);
        }

        // 启动第一个图表的渲染
        renderNext();
    }
});

方式2：用setTimeout错开任务执行

给每个图表的创建任务设置微小延迟，让它们分散到不同的事件循环中执行：

$.ajax({
    url: backend_URL,
    dataType: 'json',
    success: function(data) {
        var container = $('#charts');

        $.each(data, function(index, item) {
            // 每个任务延迟index*10ms，避免集中执行导致短暂阻塞
            setTimeout(function() {
                var chartContainer = $('<div class="chart-item"></div>').appendTo(container);
                Highcharts.chart(chartContainer[0], {
                    chart: {
                        type: item.chartType === 'pie' ? 'pie' : 'column'
                    },
                    title: {
                        text: item.title
                    },
                    series: item.seriesData
                });
            }, index * 10);
        });
    }
});

关键原理说明 #

• 浏览器的渲染和JS执行是互斥的，同一个事件循环周期内，JS执行完才会进行页面重绘。
• 原来的同步循环把所有图表创建逻辑塞进一个事件周期，浏览器没时间重绘，所以页面一直空白。
• 异步拆分后，每个图表的创建占用一个独立的事件周期，执行完后浏览器立即重绘页面，用户就能看到刚完成的图表。

额外体验优化（可选） #

• 给图表容器添加加载状态：创建chartContainer时先插入<div class="loading">加载中...</div>，在Highcharts的load事件中移除加载提示。
• 控制并发数：如果100个图表同时异步执行可能导致性能问题，可以限制同时渲染的图表数量（比如一次渲染3个，完成后再渲染下一批）。

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