是否可以在整个文档准备好之前（在任何新的GoogleCharts版本上）在网页上加载Google Chart？

Question

目前，我坚持使用GoogleCharts的第1版，因为据我所知，当我需要能够在页面加载之前生成图表时，它是唯一可行的版本。 我知道通常做这件事并不好，但在这种情况下是必要的。

我正在加载一个动态创建内容的长滚动页面，我希望每个图表在加载时显示，这样在任何图表（顶部的图表）加载之前，不需要加载整个动态创建的内容。

到目前为止，我发现的唯一解决方案是使用谷歌图表版本1，但此版本缺少我想添加的功能。 有没有人有任何想法？

Answer 1

正如回调文档中所述......

在调用回调之前，加载程序还将等待文档完成加载。

但这只意味着它会等待加载静态文档，
表示首次打开时页面上的内容，
而不是动态创建的内容

无论如何，如果你正在装载一堆东西，都是连续的，
浏览器无法跟上，
并将等待处理完成，以显示结果
这就是为什么一切都会出现的原因

如果您希望在显示其他内容之前显示某些内容，
你需要延迟添加更多内容，
直到您确认以前的内容已加载

例如，在绘制第一个图表时，
等待它的'ready'事件开火，
在绘制下一个图表之前
（或'animationfinish' ）

google.visualization.events.addListener(chart, 'animationfinish', drawNextChart);

您可以使用setTimeout为动态内容生成相同的结果
这将允许浏览器休息一下，
显示到目前为止的内容，然后继续处理......
（即使超时设置为1m）

window.setTimeout(drawNextContent, 1);

请参阅以下工作代码段，
在上一个完成之后绘制每个图表...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'x'); data.addColumn('number', 'y'); data.addRows([ [new Date("2017-08-16T06:00:00.000Z"), 145289], [new Date("2017-08-16T05:00:00.000Z"), 138370], [new Date("2017-08-16T04:00:00.000Z"), 117605], [new Date("2017-08-16T03:00:00.000Z"), 81268], [new Date("2017-08-16T02:00:00.000Z"), 59815], [new Date("2017-08-16T01:00:00.000Z"), 51899] ]); var options = { animation: { duration: 1000, startup: true } }; drawChart0(); function drawChart0() { var container = document.getElementById('charts').appendChild(document.createElement('div')); var chart = new google.visualization.LineChart(container); google.visualization.events.addListener(chart, 'animationfinish', drawChart1); chart.draw(data, options); } function drawChart1() { var container = document.getElementById('charts').appendChild(document.createElement('div')); var chart = new google.visualization.LineChart(container); google.visualization.events.addListener(chart, 'animationfinish', drawChart2); chart.draw(data, options); } function drawChart2() { var container = document.getElementById('charts').appendChild(document.createElement('div')); var chart = new google.visualization.LineChart(container); google.visualization.events.addListener(chart, 'animationfinish', drawContent0); chart.draw(data, options); } function drawContent0() { var container = document.getElementById('charts').appendChild(document.createElement('div')); container.innerHTML = document.getElementById('content-template').innerHTML; window.setTimeout(drawContent1, 1000); } function drawContent1() { var container = document.getElementById('charts').appendChild(document.createElement('div')); container.innerHTML = document.getElementById('content-template').innerHTML; } }, packages: ['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="charts"></div> <script id="content-template" type="text/html"> <div><h3>Dynamic Content</h3></div> <div>shows after charts finish</div> </script> 

Answer 2

Google Charts在继续回调之前等待文档加载完成的主要原因是您创建图表时引用的容器元素必须存在并且在您绘制图表时可见。 但是，如果您想负责确保容器已准备就绪，您现在可以（使用版本45.2）选择避免等待，方法是将'ignoreWindowOnLoad': true添加到您的加载设置中。