在同一頁面上顯示多個Google圖表

我查看了multiple google charts api, on same web page以及其他幾個網址，但是都是invain。我無法在我的網頁上加載多個/甚至是單個Google圖表。單個圖表會很容易，但只要我輸入其他圖表，所有圖表都會顯示。我的谷歌圖表是在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>

來源

2014-03-29 rishi jain

這裏有一個錯誤：

<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

調試螢火蟲帶來了另一個錯誤：

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

來源

2014-03-29 04:07:54 hrgui

非常感謝。讓我試試看。 –

優秀。得到它的工作。這主要是包裝後的支架問題。我應該抓住它..我的壞。 google.load（'visualization'，'1'，{packages：['gauge'，'table'，'corechart']}）; –

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

:-)

來源

2014-03-29 04:04:46 JayG

在同一頁面上顯示多個Google圖表

回答

相關問題