javascript - 谷歌图表绘制()性能

Question

我正在尝试构建一个应用程序，除其他外，它可以绘制多个 Google 图表时间线。用于填充时间线的数据是从 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的测试数据，不是我最大的。)

将我的应用程序锁定 296 毫秒虽然很不幸，但可以接受。哎呀，大多数用户可能也不会注意到 1.9 秒的延迟。 15.8s是 Not Acceptable 。然而，Google's guide说:

The draw() method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available.

有没有办法让 draw 异步运行，就像文档声称的那样？

Answer 1

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

核心图表(面积图、条形图、气泡图、烛台图、柱形图、组合图、直方图、折线图、饼图、散点图和阶梯面积图)具有 allowAsync 选项 as of version 41它将这个处理步骤分解为 block ，以便整个过程可以被中断(尽管每个 block 不能)。不幸的是，时间轴不是核心图表，并且没有此选项。