forループで各パスの直後にDygraphsを描画する方法は？

Question

私はページに複数（10）のグラフを表示するためにグラフグラフを使用しています。 Dygraphオブジェクトはforループで作成されます。これらのグラフはすべて、ループの終了後すぐに表示/描画されます。約50000の値を持つDygraphオブジェクトを作成するのに約400msかかるので、ページにレスポンスがない場合は約4秒です（10グラフ）。各ループ・パスの直後に各グラフを描画する方法はありますか？

function drawGraph(chartData, chartOptions) { 
    var graph = new Array(); 
    var index = 0; 
    for (var chart in chartData) { 
    graph[index] = new Dygraph(document.getElementById(chart + "_graph"), chartData[chart], chartOptions[chart]); 
    index++; 
    } 
} 

Answer 1

あなたが保存されたデータ介して1回の反復処理によって1にタイマーを使用して、一度に各グラフ1を描き、その後、これらのVARSにデータを保存し、グローバルスコープに関数の外にいくつかのVARSを定義することができますそれらの間...

/* define the parts of your function outside of the scope of the drawGraph() function */ 
 
var idx = 0; 
 
var _chartData = []; 
 
var _chartOptions = []; 
 
var _charts = []; 
 
var graph = []; 
 

 

 
function drawGraph(chartData, chartOptions) { 
 
    graph = []; // initialize 
 
    idx = 0; 
 

 
    /* store the relevant data into memory */ 
 
    for (var chart in chartData) { 
 
    _chartData[chart] = chartData[chart]; 
 
    _chartOptions[chart] = chartOptions[chart]; 
 
    _charts.push(chart); 
 
    } 
 

 
    /* start the process of drawing each graph one by one */ 
 
    draw_next(); 
 
} 
 

 
function draw_next() { 
 

 
    // grab our data saved in memory 
 
    var tmp_chart = _charts[idx]; 
 

 
    /* this tells us when no more charts exist (sorta) */ 
 
    if (tmp_chcart != undefined) { 
 
    graph[idx] = new Dygraph(document.getElementById(tmp_chart + "_graph"), _chartData[tmp_chart], _chartOptions[tmp_chart]); 
 
    idx++; 
 

 
    /* in 1 ms run this function again */ 
 
    setTimeout(function() { 
 
     draw_next(); 
 
    },1); 
 
    } 
 
}