Google Charts draw（）性能

Question

我正在嘗試構建一個應用程序，其中包括繪制多個Google Charts時間軸。 用於填充時間軸的數據是從JSON文件中提取的，其中一些文件非常大。 我最大的測試數據約為30MB。

Google Charts文檔說chart.draw(table, options)是異步的。 但是，事實並非如此。 當我加載數據並開始繪制圖表時，我的應用程序將鎖定，直到最后一個圖表完成其繪制過程為止。

// several times, call:
google.charts.load('current', {
  packages: ['timeline'],
  callback: this.layoutTimelineFor_(
    container,
    this.data[group],
    group),
  });

// ...

layoutTimelineFor_: function(container, timeline, group) {
  return () => {
    const chart = new google.visualization.Timeline(container);
    const table = this.mapTimelineToDataTable_(timeline, group);

    // ...

    const options = {
      backgroundColor: 'transparent',
      height: document.documentDelement.clientHeight / 2 - 50,
      width: (container.parentElement || container)
        .getBoundingClientRect().width,
      forceIFrame: true,
      timeline: {
        singleColor: '#d5ddf6',
      },
      tooltip: {
        trigger: 'none',
      },
      hAxis: {
        minValue: 0,
      },
    };

    if (this.duration > 0) {
      options.hAxis.format = this.pickTimeFormat_(this.duration);
      options.hAxis.maxValue = this.duration;
      const p1 = performance.now();
      chart.draw(table, options);
      const p2 = performance.now();
      console.log(`${group} chart.draw(table, options) took ${p2-p1}ms`);
    } else {
      this.chartQueue_.push({chart, table, options, group});
    }
  }
}

// ...

durationChanged: function() {
  while (this.chartQueue_.length) {
    const data = this.chartQueue_.shift();
    data.options.hAxis.format = this.pickTimeFormat_(this.duration);
    data.options.hAxis.maxValue = this.duration;
    const p1 = performance.now();
    data.chart.draw(data.table, data.options);
    const p2 = performance.now();
    console.log(`${data.group} chart.draw(table, options) took ${p2-p1}ms`);
  }
}

我的兩個計時器的輸出類似於以下內容：

label chart.draw(table, options) took 154.26999999999998ms
shot chart.draw(table, options) took 141.98500000000013ms
face chart.draw(table, options) took 1601.9849999999997ms
person chart.draw(table, options) took 13932.140000000001ms

這些數字與每個時間軸圖表用作數據的JSON的大小大致成比例。 （注意：以上數字來自約20MB的測試數據，不是我的最大數據。）

將我的應用程序鎖定296ms將是不幸的，但可以接受。 哎呀，大多數用戶可能也不會注意到1.9s的延遲。 15.8秒是不可接受的。 然而， 谷歌的指南說：

draw()方法是異步的：也就是說，它立即返回，但是返回的實例可能不是立即可用的。

有沒有一種方法可以使draw異步運行，就像文檔中聲稱的那樣？

Answer 1

經過進一步研究，似乎只有圖表的實際繪圖是異步的。 在繪圖開始之前，數據經過一個（同步）處理步驟，這就是我遇到問題的原因。 對於具有像我一樣大的數據集的時間線圖，沒有解決方案。

從版本41開始 ，核心圖表（面積圖，條形圖，氣泡圖，燭形圖，柱形圖，組合圖，直方圖，折線圖，餅圖，散點圖和階梯式區域）都具有allowAsync選項，該選項將此處理步驟分解為多個部分，以便整個過程可以中斷（盡管每個塊都不能）。 不幸的是，時間軸不是核心圖表，並且沒有此選項。