javascript 在同一页面上显示多个 Google 图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22726742/
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
Displaying multiple Google charts on same page
提问by rishi jain
I have looked into multiple google charts api, on same web pageand couple of other URLs but invain. I am not able to load multiple / even single google chart on my page. Single chart would come easily but as soon as I enter other charts all of them will go. My google chart is inside the php script. The values are pulled successfully from the database, however google charts won't load. Dont know the error. Any help is appreciated. The code is as below:
我在同一个网页和其他几个 URL上查看了多个 google charts api，但无济于事。我无法在我的页面上加载多个/甚至单个谷歌图表。单个图表很容易出现，但只要我输入其他图表，它们都会消失。我的谷歌图表在 php 脚本中。这些值已成功从数据库中提取，但不会加载 google 图表。不知道错误。任何帮助表示赞赏。代码如下：
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:'gauge','table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize()
{
function drawVisualization() {
drawA();
drawB();
drawC();
}
function drawA() {
var data_PUE = google.visualization.arrayToDataTable([
['Label', 'Value'],
['PUE',<?php echo $r_PUE['PUE']; ?> ] ]);
var options_PUE = {
width : 800,
height : 240,
redFrom: 2.5, redTo: 5,
yellowFrom:1.5, yellowTo: 2.5,
greenFrom:0, greenTo: 1.5,
minorTicks: 1,
max:5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data_PUE, options_PUE);
}
function drawB() {
var data_CEC = google.visualization.arrayToDataTable([
['Label', 'Value'],
['CEC',<?php echo $r_EDF_CEC['CEC']; ?> ] ]);
var options_CEC = {
width : 120,
height : 120,
redFrom: 1, redTo: 3,
yellowFrom:.5, yellowTo: 1,
greenFrom:0, greenTo: .5,
minorTicks: .5,
max:3
};
var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
chart1.draw(data_CEC, options_CEC);
}
function drawC() {
var data_LEC = google.visualization.arrayToDataTable([
['Label', 'Value'],
['LEC',<?php echo $r_EDF_LEC['LEC']; ?> ] ]);
var options_LEC = {
width : 120,
height : 120,
redFrom: .05, redTo: .1,
yellowFrom:.01, yellowTo: .05,
greenFrom:0, greenTo: .01,
minorTicks: .01,
max:.05
};
var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
chart2.draw(data_LEC,options_LEC);
}
}
</script>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
回答by hrgui
There is an error here:
这里有一个错误：
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
I'm pretty sure you mean chart_div, chart_div1, chart_div2
我敢肯定你的意思是chart_div，chart_div1，chart_div2
Debugging in firebug brings another error:
在 firebug 中调试会带来另一个错误：
google.load('visualization', '1', {packages:'gauge','table', 'corechart']});
It should be
它应该是
google.load('visualization', '1', {packages:['gauge','table', 'corechart']});
And lastly, the function initialize()will do nothing because there is another function called drawVisualization()that was made which would do the drawing for you. Either call drawVisualization()or just remove that function declaration.
最后，该函数initialize()将不执行任何操作，因为已调用另一个函数drawVisualization()来为您进行绘图。调用drawVisualization()或删除该函数声明。
回答by JayG
Your div id's at the bottom of your code are all called "chart_div" but your document.getElementById's are set to:
您代码底部的 div id 都称为“chart_div”，但您的 document.getElementById 设置为：
document.getElementById('chart_div')
document.getElementById('chart_div1')
document.getElementById('chart_div2')
change your div id's to match:
更改您的 div id 以匹配：
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<div id="chart_div1" style="width: 200px; height: 150px;"></div>
<div id="chart_div2" style="width: 200px; height: 150px;"></div>
:-)
:-)
