Javascript 一个页面上有两个以上的谷歌图表？_Javascript_Google Visualization

Javascript 一个页面上有两个以上的谷歌图表？

javascript google-visualization

Javascript 一个页面上有两个以上的谷歌图表？,javascript,google-visualization,Javascript,Google Visualization,我一直在努力解决这个问题已经有一段时间了，谷歌似乎在过去的几年里对谷歌图表API做了很多小的修改，这使得找到我的图表不起作用的答案变得更加困难我只是想在一个页面上显示两个以上的相同图表类型（条形图）。就在今天，我找到了一个解决方案，允许我一次显示两个图表（链接：“”），但这只是一个小胜利，因为我确实需要两个以上的图表来显示，而这个解决方案只是强制一个图形先渲染另一个这是我目前的代码： Javascript google.load（'visualization'，'1'，{packages:

我一直在努力解决这个问题已经有一段时间了，谷歌似乎在过去的几年里对谷歌图表API做了很多小的修改，这使得找到我的图表不起作用的答案变得更加困难

我只是想在一个页面上显示两个以上的相同图表类型（条形图）。就在今天，我找到了一个解决方案，允许我一次显示两个图表（链接：“”），但这只是一个小胜利，因为我确实需要两个以上的图表来显示，而这个解决方案只是强制一个图形先渲染另一个

这是我目前的代码：

Javascript

google.load（'visualization'，'1'，{packages:['corechart'，'line'，'bar']}）；
setOnLoadCallback（drawStuff）；
函数drawStuff（）{
//播放数据的课程
var data=new google.visualization.arrayToDataTable([
[''，'播放的轮数']，
[“肯·麦克唐纳”，第10页]，
[“ASU Karsten”，8]，
[“TPC Scotts…”，7]，
[“Ahwatukee”，3]，
[‘其他’，3]
]);
//你玩过的游戏
变量选项={
标题：“”，
宽度：440，
身高：215，
图例：{位置：'无'}，
轴：{x:{0:{side:'bottom'}}}，
条：{groupWidth:“70%”，
颜色：[“暗绿色”]，
};
//课程分数数据
var data2=新的google.visualization.arrayToDataTable([
[''，'播放的轮数']，
[“TPC Scotts…”，81]，
[“ASU喀斯特…”，83]，
[“肯·麦克唐纳”，87]，
[“Ahwatukee”，90]，
]);  
//课程分数选项
var选项2={
标题：“”，
宽度：440，
身高：215，
图例：{位置：'无'}，
轴：{x:{0:{side:'bottom'}}}，
变量：{viewWindow:{min:60}}，
条：{groupWidth:“70%”，
颜色：[“暗绿色”]，
};
var chart=new google.charts.Bar（document.getElementById（'Courses_Played'）；
google.visualization.events.addOneTimeListener（图表'ready'，函数（）{
var chart2=new google.charts.Bar（document.getElementById（'Course_Scores'）；
//将经典选项转换为材质选项。
chart2.draw（data2，google.charts.Bar.convertOptions（options2））；
});
绘制（数据，google.charts.Bar.convertOptions（选项））；
};

以下示例显示如何在单个页面上呈现

Google图表（属于

Google.Charts.Bar

类型）：

google.load（'visualization'，'1'，{packages:['corechart'，'line'，'bar']}）；
setOnLoadCallback（绘图图）；
函数绘图图（）{
var chartsData=[
{
“数据”：[
[''，'播放的轮数']，
[“肯·麦克唐纳”，第10页]，
[“ASU Karsten”，8]，
[“TPC Scotts…”，7]，
[“Ahwatukee”，3]，
[‘其他’，3]
],
“选项”：{
标题：“”，
宽度：440，
身高：215，
图例：{位置：'无'}，
轴：{x:{0:{side:'bottom'}}}，
条：{groupWidth:“70%”，
颜色：[“暗绿色”]，
},
“chartDivId”：“你踢过的球场”
},
{
“数据”：[
[''，'播放的轮数']，
[“TPC Scotts…”，81]，
[“ASU喀斯特…”，83]，
[“肯·麦克唐纳”，87]，
[“Ahwatukee”，90]，
],
“选项”：{
标题：“”，
宽度：440，
身高：215，
图例：{位置：'无'}，
轴：{x:{0:{side:'bottom'}}}，
变量：{viewWindow:{min:60}}，
条：{groupWidth:“70%”，
颜色：[“暗绿色”]，
},
“chartDivId”：“课程分数”
},
{
“数据”：[
[''‘2014年进行的回合数']，
[“肯·麦克唐纳”，5]，
[“ASU Karsten”，4]，
[“TPC Scotts…”，7]，
[“Ahwatukee”，4]，
[‘其他’，6]
],
“选项”：{
标题：“”，
宽度：440，
身高：215，
图例：{位置：'无'}，
轴：{x:{0:{side:'bottom'}}}，
条：{groupWidth:“70%”，
颜色：[“暗绿色”]，
},
“chartDivId”：“2014年播放的课程”
},
];
退税部分（chartsData）；
};
功能牵引杆部件（图表数据、索引）{
var curIndex=指数| | 0；
var chartData=chartsData[curIndex]；
var dataTable=新的google.visualization.arrayToDataTable（chartData.data）；
var chart=new google.charts.Bar（document.getElementById（chartData.chartDivId））；
google.visualization.events.addOneTimeListener（图表'ready'，函数（）{
if（curIndex


我认为当前版本存在问题，存在问题。

在加载另一个图表之前，不需要等待一个图表加载
下面是一个示例，它加载版本41
-->所有3个图表绘制，而不等待另一个图表

google.charts.load（'41'，{packages:['bar']}）；
google.charts.setOnLoadCallback（drawStuff）；
函数drawStuff（）{
//播放数据的课程
var data=new google.visualization.arrayToDataTable([
[''，播放的轮数
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>