canvasjs實時更新數據庫中的數據

我是基於web的可視化工具的新手我之前使用過chartjs，但沒有找到任何解決方案，因此我轉移到了canvasjs.Now創建圖表併成功顯示，因此我想讓它移動而不刷新，因爲來自數據庫的數據不斷移動。這裏是我的代碼：canvasjs實時更新數據庫中的數據

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> 


    <script type="text/javascript"> 
    window.onload = function() { 
     $.getJSON("json.php", function(result){ 
     var dps= []; 

//Insert Array Assignment function here 
for(var i=0; i<result.length;i++) { 
    dps.push({"label":result[i].ts, "y":result[i].ph}); 
} 

//Insert Chart-making function here 
var chart = new CanvasJS.Chart("chartContainer", { 
    zoomEnabled:true, 
    panEnabled:true, 
    animationEnabled:true, 
    title:{ 
     text: "myChart from mySQL database" 
    }, 

    axisX:{ 
     title: "TimeStamp" 
    }, 

     axisY:{ 
     title: "myDataPoints", 
     minimum: 0 
    }, 

    data: [{ 
     type: "spline", 
     dataPoints: 
      dps 
       }] 
}); 
chart.render(); 

}); 
    } 
    </script> 
</head> 
<body> 

    <div id="chartContainer" style="width: 800px; height: 380px;"></div> 

</body> 
</html>

現在，我想問問那裏有什麼需要保持這個圖表移動...？

來源

2017-08-12 njhelloworld

如果您想讓這些線條移動，您需要從數組的開頭刪除數據點。你可以在JS中使用shift函數。

for(var i=0; i<result.length;i++) { 
    dps.push({"label":result[i].ts, "y":result[i].ph}); 
    dps.shift(); 
}

這會爲你做的伎倆。

來源

2017-08-21 05:43:28 Beevk

hai @beevk。非常感謝你的回覆，我一直在等待別人回答。我試着添加dps.shift（）函數，但沒有任何反應mu瀏覽器沒有顯示。除了添加.shift（）函數之外，還需要做些什麼才能使之工作？ – njhelloworld

當你說什麼都沒有顯示時，你是什麼意思？它會拋出一些錯誤嗎？檢查您的控制檯以查找任何錯誤。此外，如果您確實想要將移動模式可視化，則for循環不適用於您，因爲您無法看到發生的變化。您需要以一定的時間間隔調用並讀取JSON文件，以查找任何更改並重新呈現圖表。 – Beevk

感謝您的答覆..我只是改變我的for循環與你建議的循環.. – njhelloworld

canvasjs實時更新數據庫中的數據

回答

相關問題