Google图表绘制()性能

Question

我正在尝试构建一个应用程序，其中包括绘制几个Google时间表。用于填充时间线的数据是从JSON文件中提取的，有些文件相当大。我最大的测试数据大约是30 my。

Google文档说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的大小大致成正比。(注:以上数字来自~20 my的测试数据，而不是我的最大数据。)

将我的应用程序锁定296 my将是不幸的，但可以接受。见鬼，大多数用户可能也不会注意到1.9秒的延迟。15.8秒是不可接受的。然而，谷歌指南说：

draw()方法是异步的:也就是说，它会立即返回，但是它返回的实例可能不会立即可用。

是否有一种方法可以让draw异步运行，就像文档声明的那样？

Answer 1

经过进一步的研究，似乎只有实际绘制的图表是异步的。在绘图开始之前，数据经过(同步)处理步骤，这是导致我的问题的原因。对于具有与我的数据集一样大的时间线图，没有解决方案。

核心图表(区域、条形图、气泡图、烛台图、列图、组合图、直方图、直线图、饼图、散点图和分步图)有一个allowAsync选项截至第41版，它将这个处理步骤分解成块，以便可以中断整个进程(尽管每个块不能)。不幸的是，时间线不是核心图表，也没有这个选项。