Добавление контента динамически

0

Я использую 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 раз.

  • 0
    на самом деле это 3-5 секунд для извлечения данных. Как только они извлечены, они отображаются. Annywaz может создать jsfiddle для вашего кода
  • 0
    Хорошо, только что добавил jsfiddle для публикации
Показать ещё 1 комментарий
Теги:
append
amcharts

1 ответ

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

Вот демонстрация

  • 0
    Хм ... Я чувствую, что это очень близко, но этот добавляет пустые div все с тем же идентификатором
  • 0
    обновленный код с демо .... посмотрите
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню