在单个页面上有两个以上的Google图表？ [英] More than two Google Charts on a single page?
问题描述
我一直在为这个问题苦苦挣扎了一段时间，似乎谷歌多年来对谷歌图表API做了很多小的修改，这使得更难找到答案为什么我的图表无法正常工作。
我只是试图在单个页面上显示两个以上相同的图表类型（条形图）。就在今天，我找到了一个解决方案，允许我一次显示2个图表（链接： Google Charts在第一张图表后停止绘图），但这仅仅是一个小小的胜利，因为我真的需要超过2个图表才能显示，而这个解决方案只是强制一个图形在另一个图形之前呈现。
这里是我目前的代码：
Javascript
google.load（'visualization'，'1'，{packages：['corechart'，'line'，'bar']}）; google.setOnLoadCallback（drawStuff）;函数drawStuff（）{// Courses_Played Data var data = new google.visualization.arrayToDataTable（[[''，'Rounds Played']，[Ken McDonald，10]，[ASU Karsten，8]， [TPC Scotts ...，7]，[Ahwatukee，3]，['Other'，3]]）; // courses_played Options var options = {title：''，width：440，height：215，legend：{position：'none'}，axes：{x：{0：{side：'bottom'}}}，bar ：{groupWidth：70％}，颜色：['darkgreen']，}; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable（[[''，'玩过的回合次数']，[TPC Scotts ...，81]，[ASU喀斯特...，83] ，[Ken McDonald，87]，[Ahwatukee，90]，]）; // Course_Scores Options var options2 = {title：''，width：440，height：215，legend：{position：'none'}，axes：{x：{0：{side：'bottom'}}}，vAxis ：{viewWindow：{min：60}}，bar：{groupWidth：70％}，颜色：['darkgreen']，}; var chart = new google.charts.Bar（document.getElementById（'Courses_Played'））; google.visualization.events.addOneTimeListener（chart，'ready'，function（）{var chart2 = new google.charts.Bar（document。 getElementById（'Course_Scores'））; //将Classic选项转换为Material选项。 chart.draw（data，google.charts.Bar.convertOptions（options））; };
同样，这段代码目前可行，但仅仅因为我使用了适用于两个图表的解决方案。这个问题似乎出现在代码的最后一行，因为强制chart2在第一个图表之前进行渲染才能使它工作。我只是没有得到我需要做的，以允许三个或更多的图表。有什么办法可以强制任意数量的图表在另一个图表之前渲染一个图表？
Google Charts中的问题在于你只能调用google.charts.load（）一次。所以你需要在这个单一的函数调用中包含所有的包，并从网页的头部调用它。
你可以包含如下的多个包：
< head>< script type =text / javascript>
google.charts.load（current，{packages：[corechart，bar]}）;
< / script>
< / head>
这解决了我的问题，并允许我在单个页面上显示多个图表而无需更改任何代码。 / p>
验证以下内容：
https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.
I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: "Google Charts stops drawing after first chart"), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.
Here is my current code:
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
// Convert the Classic options to Material options.
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
});
chart.draw(data, google.charts.Bar.convertOptions(options));
};
Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?
The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.
You can include multiple packages like this:
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
This solved my problem and allowed me to display multiple charts on a single page without changing any code.
To verify check this: https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
这篇关于在单个页面上有两个以上的Google图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
