誰かが私が間違っていることを教えてくれることを望んでいました。Google チャートを xmlhttp で更新したいのですが、私のスクリプトは次のとおりです。
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<div id="myDiv">
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049],
['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843],
['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053],
['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
;
</script>
</div>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","UpdateGraph.php",true);
xmlhttp.send();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
以下は、コンテンツを更新したい php ファイル (UpdateGraph.php) です。私の意図は、2 番目のグラフが表示されることです。現在の動作方法は、別のグラフを表示するスペースと、自動的に「再描画」されない場合に備えて作成したボタンです。UpdateGraph.php ファイルからスクリプト タグを削除すると、新しいグラフがあるはずの領域にテキストだけが表示されます。
<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">
function drawVisualization2() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049],
['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843],
['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053],
['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization2')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization2)
</script>
<button onclick="drawVisualization2()">Redraw 2nd Graph</button>
<div id="visualization2" style="width: 600px; height: 400px;"></div>
テキストの取り込みに問題はありませんが、新しい JavaScript を取り込んだり、JavaScript を更新したりできない理由がわかりません。(ちなみに、UpdateGraph.php のコードは、現在 "div id="myDiv" が含まれている行にコピー アンド ペーストすると問題なく動作します)
ありがとうございました。