canvas.js从数据库实时更新数据

Question

I am new to web based visualization tool I used chartjs before but I did not find any solution for chartjs so, I transferred to canvasjs.Now I'm done creating the chart and it is successfully shown, thus I want to make it moving without refreshing because the data from the database is constantly moving. 我是以前使用过Chartjs的基于Web的可视化工具的新手，但是我没有找到任何针对Chartjs的解决方案，因此，我转移到canvasjs。现在，我已经完成创建图表并成功显示了它，因此我想使其移动而不之所以刷新，是因为数据库中的数据一直在移动。 Here is my code: 这是我的代码：

<!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>

now, I would like to ask for help out there What do I need to keep this chart moving...?? 现在，我想向那里寻求帮助，我需要什么来保持此图表的移动...？

Answer 1

If you want the lines to move, you need to remove dataPoints from the beginning of the array. 如果要移动行，则需要从数组的开头删除dataPoints。 You can do so using shift function in JS. 您可以使用JS中的shift函数来实现。

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

This would do the trick for you. 这将为您解决问题。

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