Question

我想构建一个小应用程序，它从mySQL加载数据（测量值），并使用FusionChart从中创建一个图表。我想实现一个函数，它每5秒刷新一次图表的内容。由于我是一名电气工程师，我对jQuery和AJAX并不熟悉，所以我将不胜感激。

这是我的index.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>

这是我的chart.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>";

?>

Answer 1

您应该将脚本分成两部分：

一个显示主要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调用，处理结果并设置一个新的超时。

每5秒刷新一次JSON填充图表的内容

1 个答案: