如何在每次通过 for 循环后立即绘制 Dygraphs？

Question

我正在使用 Dygraphs 在一个页面中显示多 (10) 个图表。 Dygraph 对象是在 for 循环中创建的。循环完成后，所有这些图立即变为 visible/drawn。创建具有大约 50000 个值的 Dygraph 对象大约需要 400 毫秒，因此页面上大约有 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);
  }
}

如何在每次通过 for 循环后立即绘制 Dygraphs？

How to draw Dygraphs immediately after each pass in a for loop?

javascript

for-loop

dygraphs