Question

我已经查看了multiple google charts api, on same web page和其他几个网址，但仍然可以使用。我无法在我的页面上加载多个/甚至单个谷歌图表。单个图表很容易就可以了，但是一旦我输入其他图表，它们就会全部出现。我的谷歌图表在PHP脚本中。从数据库中成功提取值，但不会加载谷歌图表。不知道错误。任何帮助表示赞赏。代码如下：

<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>

Answer 1

这里有一个错误：

<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>

我非常确定您的意思chart_div，chart_div1，chart_div2

在firebug中调试会带来另一个错误：

google.load('visualization', '1', {packages:'gauge','table', 'corechart']});

应该是

google.load('visualization', '1', {packages:['gauge','table', 'corechart']});

最后，函数initialize()将不执行任何操作，因为还有另一个名为drawVisualization()的函数可以为您绘制图形。可以调用drawVisualization()或只删除该函数声明。

http://jsbin.com/xerewuva/1/edit

Answer 2

您代码底部的div id全部称为“chart_div”，但您的document.getElementById设置为：

document.getElementById('chart_div')
document.getElementById('chart_div1')
document.getElementById('chart_div2')

更改您的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>

： - ）

在同一页面上显示多个Google图表

2 个答案: