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

Question

我调查过multiple google charts api, on same web page和其他几个 URL，但都是无效的。我无法在我的页面上加载多个/甚至单个谷歌图表。单个图表很容易出现，但一旦我输入其他图表，所有图表都会消失。我的谷歌图表位于 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