Flot chart загрузка анимации при рендеринге

Question

Я пытаюсь реализовать какую-то анимацию, в то время как большой график получает визуализацию с использованием флота. Я пробовал множество решений, все из которых потерпели неудачу. Кто-нибудь знает, возможно ли это, чтобы пользователь мог видеть, что график отображается.

Я попытался использовать накладку с gif загрузки, но gif не оживляет, пока график не остановит рендеринг.

Код запрашивается много, но я хочу убедиться, что пользователь видит прогресс.

Заранее спасибо

Answer 1

Flot оказывает весь участок за один проход в потоке пользовательского интерфейса. Невозможно показать прогресс без изменения самой библиотеки. Идеальное решение потребует много работы, но, в зависимости от ваших данных, достойная аппроксимация может не потребовать больших усилий.

Например, предположим, что ваш сюжет содержит много серий, и каждый сам по себе делает довольно быстро, но вместе они занимают много времени. В этом случае, если открыть источник и искать Флот для функции дро, вы увидите, что есть простой цикл вызова drawSeries для каждой серии:

function draw() { 

    CODE BLOCK A 

    for (var i = 0; i < series.length; ++i) { 
     executeHooks(hooks.drawSeries, [ctx, series[i]]); 
     drawSeries(series[i]); 
    } 

    CODE BLOCK B 
} 

Replace, что с (примерно, не проверял это) следующее:

function draw() { 

    CODE BLOCK A 

    var i = 0, 
     drawNextSeries = function() { 
      drawSeries(series[i]); 
      if (++i < series.length) { 
       setTimeout(drawNextSeries, 0); 
      } else { 
       CODE BLOCK B 
      } 
     }; 

    setTimeout(drawNextSeries, 0); 
} 

Идея состоит в том, чтобы рисовать каждую серию отдельным вызовом через setTimeout. Нулевая миллисекунда задержки приостанавливает вызов для запуска после любой ожидающей работы, такой как другой JS-код, анимация и т. Д. Поэтому после того, как каждая серия рисует, есть вероятность, что пользовательский интерфейс будет обновлен до следующего розыгрыша.

Опять же, это работает только в том случае, если у вас есть много серий, которые кажутся довольно быстро. Если у вас есть только одна большая серия, вы все равно будете делать что-то подобное, но внутри drawSeries.