canvas.js從數據庫實時更新數據

Question

我是以前使用過Chartjs的基於Web的可視化工具的新手，但是我沒有找到任何針對Chartjs的解決方案，因此，我轉移到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>

現在，我想向那里尋求幫助，我需要什么來保持此圖表的移動...？

Answer 1

如果要移動行，則需要從數組的開頭刪除dataPoints。 您可以使用JS中的shift函數來實現。

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

這將為您解決問題。

canvas.js從數據庫實時更新數據

問題描述

1 個解決方案

解決方案1
2 2017-08-21 05:43:28

canvas.js從數據庫實時更新數據

問題描述

1 個解決方案

解決方案1 2 2017-08-21 05:43:28

解決方案1
2 2017-08-21 05:43:28