谷歌图表 draw() 性能答案

【问题标题】：Google charts draw() performance谷歌图表 draw() 性能
【发布时间】：2017-03-18 03:02:44
【问题描述】：

我正在尝试构建一个应用程序，除其他外，它会绘制多个 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 是不可接受的。然而，Google's guide 说：

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

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

【问题讨论】：

只是问，~20MB 的数据，对于一个简单的统计图表来说，这会不会太精确了一点？也许您应该缩小时间窗口或将精度从 1 秒减少到 2 秒，使其缩小 50%，使其渲染速度提高 50%。无论哪种方式，async 调用仍然严重依赖浏览器植入。 Chrome 与 Firefox 都会显示其他结果。
@WhiteHat，谢谢。我想我在以前的代码版本中只调用过一次。然而，切换回单个 load() 调用并不能解决问题。
@Xorifelse，数据对应于页面其他位置显示的视频。最大的 JSON 文件是基于以 10fps 运行的视频生成的。上面的 13932.14ms 数字来自一个一般结构为 {"id":"4574491","annotations":{"person":[...26661 Objects]}} 的文件
@WhiteHat，这不是强制按顺序绘制时间线吗？

标签： javascript charts google-visualization

【解决方案1】：

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

核心图表（面积图、条形图、气泡图、烛台图、柱形图、组合图、直方图、折线图、饼图、散点图和阶梯区域）有一个 allowAsync 选项 as of version 41 将这个处理步骤分解成块，以便整个过程可以被中断（尽管每个块都不能）。不幸的是，时间线不是核心图表，也没有此选项。

【讨论】：