Javascript 一个页面可以有多个谷歌图表吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6708777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible to have multiple google charts in one page?
提问by Bobo
I am using Google visualization api. Following is my sample code. Either of the two charts can be shown if it is the only one to be drawn. But I can not get both working. Thanks for your advice.
我正在使用 Google 可视化 API。以下是我的示例代码。如果要绘制唯一一个图表，则可以显示这两个图表中的任何一个。但我不能让两者都工作。谢谢你的建议。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
回答by Jos Dirksen
The problem is in your divs.
问题出在你的 div 上。
Replace this:
替换这个：
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
With this:
有了这个：
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
回答by djsadinoff
Probably not your problem, but on a related note, I have found that if you have lots of Google Visualizations on the same page ( I believe that it was in the neighborhood of 50) , Google will throttle the usage, and stop rendering properly.
可能不是您的问题，但在相关说明中，我发现如果您在同一页面上有很多 Google Visualizations（我相信它在 50 个附近），Google 将限制使用量，并停止正确呈现。
回答by Mike Graf
Just throwing down some information that relates to a problem I had (not the OP's exact Q).
只是抛出一些与我遇到的问题相关的信息（不是 OP 的确切 Q）。
When you want to draw multiple charts on one page, you must use different ids for the divs your targeting (duh!) . So if you have a page that should have multiple charts but only 1 (or N < expected) is rendering, double check that there is a unique div id for each chart and that the JavaScript targets a unique div id.
当您想在一页上绘制多个图表时，您必须为定位的 div 使用不同的 id（废话！）。因此，如果您的页面应该有多个图表，但只有 1 个（或 N < 预期）正在呈现，请仔细检查每个图表是否有唯一的 div id，并且 JavaScript 的目标是唯一的 div id。
Eg, the following will render only one chart:
例如，以下将仅呈现一张图表：
<div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 1.0, 2.0]
]);
var options = {
title: 'MyChart',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 4.0, 5.0]
]);
var options = {
title: 'MyChart2',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
