我正在尝试使用谷歌图表 API 创建饼图。它没有问题，并且在本地主机上测试时显示完美。
但是当我将整个代码放在我的 ec2 Linux 实例上时。它创建图表框，给出标题，但不绘制图表。可能是什么错误？
数据取自mysql数据库。我检查了表及其内容，但它与我的本地主机上的相同。
url.php
<html>
<head>
<title>ThenWat</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawVisualization(dataFromAjax) {
var jsonData = $.ajax({
url: "ajax_graph_temp.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
alert("");
var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
chart.draw(data, options);
}
function makeAjaxCall() {
$.ajax({url:'url.php',
data: {},
success: function(responseData) {
drawVisualization();
}
});
}
</script>
</head>
<body style="height: 560px">
<img alt="" src= "3.png" style="top: 38px; right: 689px; position: absolute; height: 91px; width: 417px"/>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<div style="z-index: 1; left: 470px; top: 100px; position: absolute; margin-top: 0px">
<label>Enter URL: <input type="text" name="sent"></label><br/>
</div>
<div style="z-index: 1; left: 420px; top: 160px; position: absolute; margin-top: 0px"> <button> Fire me </button>
</div>
</form>
<div style="z-index: 1; left: 660px; top: 160px; position: absolute; margin-top: 0px">
<button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button>
</div>
<div id="txtHint" style="z-index: 1; left: 220px; top: 250px; position: absolute; margin-top: 0px">
</div>
</body>
</html>
ajax_graph_temp.php
<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM view_name');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'pcount', 'type' => 'string'),
array('label' => 'ncount', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) $r['ind_type']);
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>
最佳答案
您设置代码的方式是进行两个 AJAX 调用，第一个调用似乎没有完成任何任务:
function makeAjaxCall() {
$.ajax({url:'url.php',
data: {},
success: function(responseData) {
drawVisualization();
}
});
}
您有用于 AJAX 调用查询的“url.php”吗？如果没有，那么您的成功函数将永远不会触发，因此永远不会调用drawVisualization。除非您对此功能有其他计划，否则您可以像这样简化代码:
google.load('visualization', '1', {'packages':['corechart']});
function drawVisualization(dataFromAjax) {
var data = new google.visualization.DataTable(dataFromAjax);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
chart.draw(data, options);
}
function makeAjaxCall() {
$.ajax({
url: "ajax_graph_temp.php",
dataType:"json",
success: drawVisualization
});
}
关于javascript - 显示使用 google 图表 api 的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18870635/