我想使用 Google Map API 创建一个简单的条形图。源代码如下。我确信 data.php 运行良好。 显示第一个输入参数的图表。但当我点击按钮时没有任何输出。我该如何解决这个问题？
<html>
<body id="body">
<div id="content">
<form action ="" method ="POST">
<tr id="tableRow">
<th valign="bottom">Select country:</th>
<td>
<select name="country" id="myCountry" class="">
<option value = "AFG">Afganistan</option>
<option value = "ARE">UAE</option>
<option value = "GBR">United Kingdom</option>
</select>
</td>
<th valign="bottom">Select parameters:</th>
<td>
<select name="indices" id="myIndices" class="">
<option value= "foodfinal">Vulnerability on food</option>
<option value= "waterfinal">Vulnerability on water </option>
<option value= "ecosystemfinal">Vulnerability on ecosystem </option>
</select>
</td>
<td valign="top">
<input type="button" class="action" onclick="displayGraph();" value="Display Graph"/>
</td>
</tr>
</form>
</div>
<script type="text/javascript" src="include/jsapi"></script>
<script type="text/javascript" src="include/jquery.min.js"></script>
<script type="text/javascript">
displayGraph();
function displayGraph(){
var country = document.getElementById('myCountry').value;
var index = document.getElementById('myIndices').value;
alert(index);
var content = document.getElementById("content");
document.getElementById("body").innerHTML = "";
document.getElementById("body").appendChild(content);
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "data.php?&country="+country+"&indices="+index,
dataType:"json",
async: false,
success : function(data) {
alert(data);
}
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1500, height: 700});
}
}
</script>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
<!--Load the AJAX API-->
</body>
</html>
最佳答案
当您点击按钮时，displayGraph 函数将第二次执行。因此，我期望命令
google.load('visualization', '1', {'packages':['corechart']});
不执行任何操作，因为包已加载。结果是您定义的回调
google.setOnLoadCallback(drawChart);
不会再次执行，因为包没有再次加载。
要解决这个问题，你可以使用类似的东西
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(displayGraph);
function displayGraph(){
var country = document.getElementById('myCountry').value;
var index = document.getElementById('myIndices').value;
alert(index);
var content = document.getElementById("content");
document.getElementById("body").innerHTML = "";
document.getElementById("body").appendChild(content);
// These two lines are not needed anymore
//google.load('visualization', '1', {'packages':['corechart']});
//google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "data.php?&country="+country+"&indices="+index,
dataType:"json",
async: false,
success : function(data) {
alert(data);
}
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1500, height: 700});
}
// Since we removed the on-load callback we need to call drawChart manually
drawChart();
}
</script>
关于javascript - 在 Google map API 中创建条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25479813/