Question

我的代码是由我自己的代码和Canvasjs的模板代码组成的，它使用Canvasjs的API来制作图表。

一切都很好，我调试得很好，图表显示我的数据库数据作为来源。我的数据库数据从文本文件中读取数据，该文件文件包含来自基于Arduino的脉冲传感器的数据。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">

                $().ready(function () {

                     var dataPoints = [];

                var chart = new CanvasJS.Chart("chartContainer",{
                title :{
                text: "Patient #01"
                },          
                data: [{
                type: "line",
                dataPoints: dataPoints 
                }]
                }); 

            function updateChart( result ) { // move it here!!!
            $.getJSON("arduino_data.php", function( result ){

            var dataLength = 40; // number of dataPoints visible at any point
            var updateInterval = 20;
            var chart = new CanvasJS.Chart("chartContainer",{ // new chart Object
                title :{
                    text: "Patient #01"
                },          
                data: [{
                    type: "line",
                    dataPoints: dataPoints 
                }]
            });
            for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
            }
            if (dataPoints.length > dataLength){
                dataPoints.shift();             
            }        
            chart.render();   
        }); 
    }


    // First read - Start
    updateChart(); 
    // Update chart after specified time. 
    setInterval(updateChart, updateInterval); 

});




</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

为什么dataLength = 40;和updateInterval = 20和最后一行：updateChart（）;

不工作？应该在updateChart（）中有什么东西，比如updateChart（dataPoints）??

为什么我的图表不存在，但我有正确的代码部分？

修改

这是没有数据库数据的模板代码。这是一张实时图表。它每秒钟更新一次。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer2",{
            title :{
                text: "Patient #01"
            },          
            data: [{
                type: "line",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {   
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };

            if (dps.length > dataLength)
            {
                dps.shift();                
            }

            chart.render();     

        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 

    }

</script>

<script type="text/javascript" src="canvasjs.min.js"></script>

如您所见，它就像我的代码一样。但是，它使用math.randomize数据而不是数据库中的实际数据。

我的问题：为什么我的图表不会不断更新（实时）以便显示更改？我的图表保持不变。我必须手动刷新它以显示新的数据传输。

我的Canvasjs图表不会更新Interter？

0 个答案: