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实时更新数据库中的数据

回答

相关问题