我正在使用以下脚本:
<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>
我无法使用 Header 中的脚本，因为我使用的是动态内容。
我发现它在我第一次加载页面和刷新页面后都能正常工作。我现在的问题是我正在使用带有 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
});
什么都没发生。我没有收到任何错误，但图表没有出现。
任何帮助将不胜感激。
最佳答案
这对我有用:
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
}
}
关于javascript - “null”不是 Google 图表的对象(选择菜单问题，onchange 事件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15261862/