Question

我使用javascript一个接一个地显示一系列图表（图表）。 Javascript脚本从PHP脚本请求数据，然后绘制图表并显示它。获取一个图表的数据并显示它并不需要花费太多时间，但是对于许多图表来说，累积的时间很无聊。我希望在第一个图表准备就绪时显示第一个图表，然后显示第二个图表等。这样用户就可以看到这些图表是如何动态附加在页面上的，使页面越来越长。

基本上这就是我所拥有的：

<script>
var i=0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        var chart = new AmStockChart();
        dataSet.dataProvider = chartData;
        // etc. etc.

        $('#stats').append('div id="chartdiv' + i + '"></div>');
        chart.write("chartdiv" + i);
    }
});
</script>

<div id="stats"></div>

这会产生大约10个图形，但问题是显示空屏幕大约3-5秒，然后立即显示所有图形。如果我将它限制为只显示一个图形，则它显示得更快。当每个图表准备就绪时，逐个逐渐显示这些图形会很好。

UPD：以下是jsfiddle我放置了测试数据，并在一个图表中循环了20次。

Answer 1

有些事情应该有帮助.....

var i = 0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        setTimeout(function(index,d1){
            return function() {
                  var chart = new AmStockChart();
                  dataSet.dataProvider = data[d1];
                  // etc. etc.

                  $('#stats').append('div id="chartdiv' + index + '"></div>');
                  chart.write("chartdiv" + index);
            }
        }(i,chartData), 3000*i);
    }
});

以下是demo

动态添加内容

1 个答案: