gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 22:52:42 25 4
gpt4 key购买 nike

我想构建一个小型应用程序,它从 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>

这是我的 charts.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 调用、处理结果并设置新的超时。

关于javascript - 每 5 秒刷新一次 JSON 填充图表的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27660283/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com