如何在每循環for循環後立即繪製Dygraphs？

Question

我正在使用Dygraphs在頁面中顯示多個（10）圖形。 Dygraph對象是​​在for循環中創建的。所有這些圖形在循環完成後立即可見/繪製。用大約50000個值創建我的Dygraph對象大約需要400ms，所以它在頁面上的響應時間大約是4s（對於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

你可以定義一些瓦爾功能以外的全球範圍內，然後將數據保存到這些增值經銷商，再通過保存的數據通過一個迭代使用計時器來一個和在同一時間繪製每個圖中的一個在他們之間的延遲......

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