for 루프에서 각 패스 직후에 Dygraphs를 그리는 방법은 무엇입니까?

Question

페이지에 여러 개의 그래프를 표시하기 위해 그래프를 사용하고 있습니다. 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

는 그런 다음 저장된 데이터를 하나의 반복 처리에 의해 하나에 타이머를 사용, 그 바르에 데이터를 저장, 전역 범위에 함수 밖에서는 일부 바르를 정의하고 한 번에 각 그래프를 그릴 수 그들 사이의 지연 ...

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