我想构建一个小应用程序，它从mySQL（测量值）加载数据，并使用FusionChart从中创建图表。我想实现一个函数，它每 5 秒刷新一次图表的内容。由于我是一名电气工程师，所以我对jQuery和AJAX并不熟悉，所以我将不胜感激任何帮助。
这是我的索引.php，带有一张图表：
<?php include("connect.php"); ?>
<html>
<head>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
</head>
<body>
<div id="chart"></div>
<?php include("charts.php") ?>
</body>
</html>
这是我的图表.php：
<?php echo"
<script type='"text/javascript'">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
'"type'": '"column2d'",
'"renderAt'": '"chart'",
'"width'": '"100%'",
'"height'": '"auto'",
'"dataFormat'": '"json'",
'"dataSource'": {
'"chart'": {
'"caption'": '"Monthly revenue for last year'",
'"subCaption'": '"Harry's SuperMart'",
'"xAxisName'": '"Month'",
'"yAxisName'": '"Revenues (In USD)'",
'"theme'": '"fint'"
},
'"data'": [";
$result = mysqli_query($conn, "SELECT * FROM voltage");
while ($row = mysqli_fetch_array($result)) {
echo "{'"label'":'"" . "$row[id]" . "'",'"value'":'"" . "$row[value]" . "'"},";
}
echo "]
}
});
revenueChart.render();
})
</script>";
?>
你应该把你的脚本一分为二：
- 一个显示主要 JavaScript 的脚本 - 将其放在 php 之外使其更具可读性和可维护性
- 一个生成数据对象且可通过 ajax 调用的脚本。
请注意，您不应该手动构建 json，而应使用 json_encode()
您的第一个脚本如下所示：
<script type="text/javascript">
...
theme: "fint"
},
data:
<?php
include 'your_data_generating_script';
?>
}
...
第二个脚本 - 数据生成脚本 - 将简单地返回所需的 json 字符串：
// set up environment, db connetion, etc.
$result = mysqli_query($conn, "SELECT * FROM voltage");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = array("label" => $row['id'], "value" => $row['value']);
}
echo json_encode($data);
现在，您在javascript中使用setTimeout()在例如5秒后调用函数，在该函数中，您可以执行ajax调用，处理结果并设置新的超时。