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

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

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

#1楼 票数:2

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

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

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

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

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

例如,在绘制第一个图表时,
等待它的'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> 

#2楼 票数:1

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

  ask by Colby Morgan translate from so

未解决问题?本站智能推荐:

1回复

动态Google图表上的单条宽度

我在使用Google图表创建条形图时遇到了问题。 如果您正在创建动态图表并且行数很少,则单个条形将太粗。 我知道有人问过这个问题,最常见的awnser问题是,如果图表中只有一个条,那awnser是不起作用的:awnser是:输入bar: {groupWidth: <value>}
1回复

Google 图表 setColumns 行为不正确

我一直在尝试使用谷歌图表来显示一些与水肺潜水相关的数据(在下面的代码中没有使用实际数据。实际数据非常庞大)。 页面加载时数据正确显示。 但是当我使用复选框来设置列(隐藏或显示列)时,结果很奇怪。 图表将隐藏错误的列。 我附上了代码。 如果您运行它,您将看到正确显示的数据。 但是当您尝试使用复选框打
1回复

如何在Google地理图表中显示颜色值

我想这样显示Google地理图表。 我获得了世界地图,但没有获得每种颜色的价值 我进行了很多搜索,还阅读了Google可视化文档。 我什么都没有。 如果有人知道这一点,请帮助。
2回复

将响应从JSON数组写入Google图表和HTML

我有一个如下的谷歌图表代码 我想插入json api数组,如下所示 我想使用api中的report_type和Counts值更改上面Google图表中的type和total 。 我曾尝试在下面编写代码,但结果不会到来 您知道我的代码中的错误在哪里吗? 谢谢
2回复

将按钮(HTML)插入Google可视化表格图表

问题 使用Google Chart Tool可以将HTML值插入字段值,但是,我不相信这是一个好习惯。 我使用的方法如下: 我的问题 有没有其他更好的方法来实现这一目标? 有没有办法从这些按钮中捕获事件,同时还检索接收事件的行的ID? 换句话说,我如何知道
2回复

如何在我刚刚使用jQuery追加的新元素中创建Google图表?

对于上下文,我正在尝试构建一个页面,以显示当天所有活动体育游戏的Google图表。 数据源将通知有多少个(在我的下例中,正在进行3个游戏。)从那里,我想遍历所有游戏,使用jQuery为每个游戏创建一个div,然后放置一个Google图表进入每个div 这是我写的: 这将来自数据馈送:
1回复

如何在谷歌时间线图表中加载点击事件的一些信息

我正在使用谷歌时间线图表,并希望通过点击城市名称加载城市的一些细节,但不知道如何做到这一点。 google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawCh
1回复

Google悬停事件上的图表自定义图例

我正在使用Google Chart API来显示带有折线图的数据。 因为我对图例有一些特殊的需求,所以我将图表的原始图例设置为none然后像我希望的那样显示了自己的图例。 除一件事外,其他所有东西都工作正常,我想实现legend hovering function ,当您将图表的原始图例悬停在特