如何在不刷新 php 页面的情况下更新/移动我的 canvasjs 图表

Posted 2023-05-09

【中文标题】如何在不刷新 php 页面的情况下更新/移动我的 canvasjs 图表

【英文标题】：how can I update/moving my canvasjs chart without refreshing page in php

【发布时间】：2021-05-31 21:33:10

【问题描述】：

这是我的 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" ,
            xValueType: "dateTime",
            yValueFormatString: "#,### watts",
            showInLegend: true,
            legendText: "name " + yValue2 + " watts",
            dataPoints: dataPoints2
        ,
                       
            type: "line",
            name: "ST" ,
            xValueType: "dateTime",
            yValueFormatString: "#,### watts",
            showInLegend: true,
            legendText: "name " + yValue3 + " watts",
            dataPoints: dataPoints3
        ,
                       
            type: "line",
            name: "TL" ,
            xValueType: "dateTime",
            yValueFormatString: "#,### watts",
            showInLegend: true,
            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, array("x" => $x, "y" => $GT2));
        array_push($dataPoints3, array("x" => $x, "y" => $ST));
        array_push($dataPoints4, array("x" => $x, "y" => $TL));
        $x += $updateInterval;
     
?>

【问题讨论】：

你试过用ajax请求新数据吗？

或Fetch API，以避免不必要地使用jQuery。另外，如果我可以向 OP 建议：将 PHP 代码包装在三重反引号 (```) 中时，您可以在开头的三重反引号后添加 php，以确保正确突出显示语法。

@PaulDigz 是的先生，我试过但没有结果

@ahmad 我在想也许你可以使用 ajax 来获取数据，然后使用新数据重新初始化图表。

【参考方案1】：

根据@PaulDigz 的建议，您可以对数据执行 AJAX 并通过changing chart.options and call chart.render() 更新数据点。有关更多信息/工作代码，请参阅此 discussion thread。您也可以查看此demo project 以获得相同的工作示例。