如何解决如何在不刷新 php 页面的情况下更新/移动我的 canvasjs 图表
这是我的 PHP 和 Canvasjs 图表代码的全部代码。实际上,我已经完成了图表的创建并已成功显示,因此我希望在不刷新页面的情况下使其移动,因为数据库中的数据是不断变化的。当我刷新页面时,图表的所有行都会显示数据库中的最新数据,但我希望我的图表在不刷新和从数据库中获取最新数据的情况下移动,并将显示在图表上。 这是我的数据集: 数组 ( [0] => 数组 ( [x] => 1614591919000 [y] => 0 ) )。
<script>
function fun2() {
var updateInterval = <?PHP echo $updateInterval ?>;
var dataPoints1 = <?PHP echo json_encode($dataPoints1,JSON_NUMERIC_CHECK); ?>;
var dataPoints2 = <?PHP echo json_encode($dataPoints2,JSON_NUMERIC_CHECK); ?>;
var dataPoints3 = <?PHP echo json_encode($dataPoints3,JSON_NUMERIC_CHECK); ?>;
var dataPoints4 = <?PHP echo json_encode($dataPoints4,JSON_NUMERIC_CHECK); ?>;
var yValue1 = <?PHP echo $GT1 ?>;
var yValue2 = <?PHP echo $GT2 ?>;
var yValue3 = <?PHP echo $ST ?>;
var yValue4 = <?PHP echo $TL ?>;
var xValue = <?PHP echo $x ?>;
var chart = new CanvasJS.Chart("chartContainer2",{
zoomEnabled: true,title: {
text: "Trend Graph of Balloki"
},// axisX: {
// title: "chart updates every " + updateInterval / 1000 + " secs"
// },axisY:{
suffix: " watts"
},toolTip: {
shared: true
},legend: {
cursor:"pointer",verticalAlign: "top",fontSize: 22,fontColor: "dimGrey",itemclick : toggleDataSeries
},data: [{
type: "line",name: "GT1",xValueType: "dateTime",yValueFormatString: "#,### watts",xValueFormatString: "hh:mm:ss TT",showInLegend: true,legendText: "{name} " + yValue1 + " watts",dataPoints: dataPoints1
},{
type: "line",name: "GT2",legendText: "{name} " + yValue2 + " watts",dataPoints: dataPoints2
},name: "ST",legendText: "{name} " + yValue3 + " watts",dataPoints: dataPoints3
},name: "TL",legendText: "{name} " + yValue4 + " watts",dataPoints: dataPoints4
}
]
});
chart.render();
setInterval(function(){updateChart()},updateInterval);
function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
function updateChart() {
var deltaY1,deltaY2,deltaY3,deltaY4;
xValue += updateInterval;
// adding random value
yValue1 += Math.round(2 + Math.random() *(-2-2));
yValue2 += Math.round(2 + Math.random() *(-2-2));
yValue3 += Math.round(2 + Math.random() *(-2-2));
yValue4 += Math.round(2 + Math.random() *(-2-2));
// pushing the new values
dataPoints1.push({
x: xValue,y: yValue1
});
dataPoints2.push({
x: xValue,y: yValue2
});
dataPoints3.push({
x: xValue,y: yValue3
});
dataPoints4.push({
x: xValue,y: yValue4
});
// updating legend text with updated with y Value
chart.options.data[0].legendText = "GT1 " + yValue1 + " Mega watts";
chart.options.data[1].legendText = " GT2 " + yValue2+ " Mega watts";
chart.options.data[3].legendText = "ST " + yValue3 + " Mega watts";
chart.options.data[4].legendText = " TL " + yValue4+ " Mega watts";
chart.render();
}
}
window.onload = function() {
fun2();
}
</script>
<?PHP
$db =MysqLi_connect("localhost","root","","trend");
$dataPoints1 = array();
$dataPoints2 = array();
$dataPoints3 = array();
$dataPoints4 = array();
$updateInterval = 2000; //in millisecond
$initialNumberOfDataPoints = 200;
$x = time() * 1000 - $updateInterval * $initialNumberOfDataPoints;
$sql = MysqLi_query($db,"SELECT * FROM `pload` WHERE DT > DATE_SUB(Now(),INTERVAL 24 HOUR)"); //WHERE DT > DATE_SUB(Now(),INTERVAL 24 HOUR)
while ($row = MysqLi_fetch_array($sql)) {
$GT1 = $row['GT1'];
$GT2 = $row['GT2'];
$ST = $row['ST'];
$TL = $row['TL'];
array_push($dataPoints1,array("x" => $x,"y" => $GT1));
array_push($dataPoints2,"y" => $GT2));
array_push($dataPoints3,"y" => $ST));
array_push($dataPoints4,"y" => $TL));
$x += $updateInterval;
}
?>
解决方法
正如 @PaulDigz 所建议的,您可以对数据执行 AJAX 并通过 changing chart.options and call chart.render() 更新数据点。有关详细信息/工作代码,请参阅此 discussion thread。您还可以查看此 demo project 以获取相同的工作示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。