动态追加内容

Appending content dynamically

本文关键字：追加 动态      更新时间：2023-09-26

我使用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：这是我放置测试数据并在一张图表中循环 20 次的 jsfiddle。

与此类似的一些事情应该会有所帮助.....

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);
    }
});

这是演示

相关文章：