谷歌图表绘制()性能

Question

我正在尝试构建一个应用程序，该应用程序除其他外，绘制了多个Google图表时间线。用于填充时间线的数据是从 JSON 文件中提取的，其中一些文件非常大。我最大的测试数据约为 30MB。

谷歌图表文档说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.8秒是不可接受的。然而，谷歌的指南说：

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

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

Answer 1

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

核心图表(面积图、条形图、气泡图、蜡烛图、柱形图、组合图、直方图、折线图、饼图、散点图和阶梯面积图)从版本 41 开始有一个allowAsync选项，它将此处理步骤分解为块，以便可以中断整个过程(尽管每个块都不能)。不幸的是，时间轴不是核心图表，也没有此选项。