「空」是不是與谷歌圖表

我使用下面的腳本（問題與選擇菜單，onchange事件）的對象：「空」是不是與谷歌圖表

<header> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
</header> 

<body> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Header'); 
    data.addColumn('number', ''); 
    data.addColumn('number', ''); 
    data.addRows([ 
     ['Monday',300,43], 
     ['Tuesday',250,545], 
     ['Wednesday',122,78], 
     ['Thursday',348,92], 
     ['Friday',23,61], 
     ['Saturday',39,93] 
    ]); 
    var options = { 
     title: '', 
     hAxis: {title: '', titleTextStyle: '#efede9'}, 
     backgroundColor: '#efede9', 
     legend: 'none' 
    }; 
    var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google')); 
    chart.draw(data, options); 
    } 
</script> 

<div id="area_chart_google" class="area-chart"></div> 
<body>

，因爲我使用的是動態的，我不能使用腳本中頭內容。

當我第一次加載頁面，並刷新後，我覺得它工作。我現在的問題是，我使用的是一個onchange事件選擇菜單，與此類似：

<select id="form_frame1" name="frame1" onchange="getChart(this);"> 
<option value="area_chart_google" >Area Chart</option> 
<option value="area_chart_2" selected="selected">Stacked Chart</option> 
</select>

我getChart功能是：

function getChart(selection) { 
if (selection.value == "area_chart_2") { 
    document.getElementById('area_chart_2').style.display = 'block'; 
    document.getElementById('area_chart_google').style.display = 'none'; 
} 

else { 
    document.getElementById('area_chart_2').style.display = 'none'; 
    document.getElementById('area_chart_google').style.display = 'block'; 
    } 
}

因此，一旦不顯示我的area_chart_google（顯示器：無），我選擇它，我得到的錯誤：

*Firebug* google-visualization-errors-all-1 
*Chrome* Cannot read property 'length' of null 
*Safari* 'null' is not an object

我的猜測是一些與的getElementById，所以我嘗試使用：

window.onload = function(){ javascript code here }

而且也：

$(document).ready(function() { 
    javascript code here 
});

沒有發生。我沒有得到任何錯誤，但圖表沒有出現。

任何幫助將不勝感激。

來源

2013-03-07 82din

這是工作對我來說：

function getChart(selection) { 
    if (selection.value == "area_chart_2") { 
    document.getElementById('area_chart_2').style.display = 'block'; 
    document.getElementById('area_chart_google').style.display = 'none'; 
} 

else { 
    document.getElementById('area_chart_2').style.display = 'none'; 
    document.getElementById('area_chart_google').style.display = 'block'; 
    drawChart(); //call this function when using this Google Chart 
} 
}

來源

2013-03-08 19:41:47 82din

您需要先加載谷歌API：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

在腳本中也應該有適當的<body>和<head>標籤。

否則代碼是好的。下面的工作正常，我：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Header'); 
     data.addColumn('number', ''); 
     data.addColumn('number', ''); 
     data.addRows([ 
      ['Monday',300,43], 
      ['Tuesday',250,545], 
      ['Wednesday',122,78], 
      ['Thursday',348,92], 
      ['Friday',23,61], 
      ['Saturday',39,93] 
     ]); 
     var options = { 
      title: '', 
      hAxis: {title: '', titleTextStyle: '#efede9'}, 
      backgroundColor: '#efede9', 
      legend: 'none' 
     }; 
     var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="area_chart_google" class="area-chart"></div> 
    </body> 
</html>

來源

2013-03-07 02:26:26 jmac

我使用jsapi頭（它wasn在我的問題中不明確）。有兩件事情與你的不同之處在於，我不能在頭中使用腳本代碼（因爲我正在使用動態內容和其他一些原因）。第二件事是我你兩次調用google.load（我也是這樣做的，但它沒有什麼區別）。非常感謝。 – 82din 2013-03-07 16:57:56

不知道，但嘗試這樣做：

google.load("visualization", "1", {packages:["corechart"]}); 
//..your drawChart() function code here 
$(document).ready(function() { 
    google.setOnLoadCallback(drawChart); 
});

我希望你已經包含下面的腳本在你的頭：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

來源

2013-03-07 02:26:47

我試過這個，我沒有得到任何錯誤，但圖表沒有出現（是的，我包括jsapi頭文件！）。謝謝！ – 82din 2013-03-07 16:30:43

「空」是不是與谷歌圖表

回答

相關問題