Javascript canvasjs实时更新数据库中的数据_Javascript_Web_Charts_Linechart_Canvasjs

Javascript canvasjs实时更新数据库中的数据

javascript web charts

Javascript canvasjs实时更新数据库中的数据,javascript,web,charts,linechart,canvasjs,Javascript,Web,Charts,Linechart,Canvasjs,我不熟悉基于web的可视化工具，我以前使用过chartjs，但我没有找到任何chartjs的解决方案，所以我转到了canvasjs。现在我完成了图表的创建并成功地显示出来，因此我想让它在不刷新的情况下移动，因为数据库中的数据一直在移动。这是我的密码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script

我不熟悉基于web的可视化工具，我以前使用过chartjs，但我没有找到任何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>


window.onload=函数（）{
$.getJSON（“json.php”，函数（结果）{
var dps=[]；
//在此处插入数组赋值函数
对于（var i=0；i如果您希望行移动，则需要从数组的开头删除数据点。您可以使用JS中的函数来执行此操作
for(var i=0; i<result.length;i++) {
    dps.push({"label":result[i].ts, "y":result[i].ph});
    dps.shift();
}

for（var i=0；i如果要移动行，需要从数组的开头删除数据点。可以使用JS中的函数来执行此操作
for(var i=0; i<result.length;i++) {
    dps.push({"label":result[i].ts, "y":result[i].ph});
    dps.shift();
}

for（var i=0；ihai@beevk。非常感谢您的回复，我一直在等待有人回答。我尝试添加dps.shift（）函数，但没有任何结果。除了添加.shift（）之外函数我还需要做什么才能使其正常工作？你说什么都不显示是什么意思？它会引发一些错误吗？检查你的控制台以查找任何错误。此外，如果你真的想可视化移动模式，只为循环将不适用于你，因为你将无法看到正在发生的更改。你需要校准l并每隔一段时间阅读您的JSON文件以查找任何更改并重新呈现图表。感谢您的回复..我只是用您建议的for循环更改了for循环..hai@beevk。非常感谢您的回复，我一直在等待有人回答。我尝试添加dps.shift（）函数，但mu浏览器不会发生任何变化。除了添加.shift（）之外，不会显示任何内容函数我还需要做什么才能使其正常工作？你说什么都不显示是什么意思？它会引发一些错误吗？检查你的控制台以查找任何错误。此外，如果你真的想可视化移动模式，只为循环将不适用于你，因为你将无法看到正在发生的更改。你需要校准然后每隔一段时间阅读JSON文件以查找任何更改并重新呈现图表。感谢您的回复..我只是用您建议的for循环更改了for循环。。