如何在不刷新 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 以获取相同的工作示例。

javascript jquery mysql