1

我有这段代码，由我自己的代码和 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 数据而不是数据库中的真实数据。

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

4

0 回答 0