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.9秒的延迟。 15.8是不可接受的。然而，Google's guide说：

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

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

Answer 1

经过进一步研究，似乎只有图表的实际绘图是异步的。在绘图开始之前，数据经过（同步）处理步骤，这是我的问题的原因。时间轴图表没有解决方案，其数据集与我的一样大。

核心图表（区域，条形，气泡，烛台，列，组合，直方图，线条，饼图，散点图和步进区域）都有一个allowAsync选项as of version 41，它将此处理步骤分解为块可以使整个过程中断（尽管每个块都不能）。遗憾的是，时间轴不是核心图表，也没有这个选项。

Google图表draw（）效果

1 个答案: