次のスクリプトを使用しています。
<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が表示されず(display:none)、それを選択すると、エラーが発生します。
*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
});
何も起こりません。エラーは発生しませんが、チャートが表示されません。
どんな助けでも大歓迎です。