Question

我有两个代码，都生成折线图。但是，第一个不使用mysql数据源，它使用随机数学生成的数据点。但它使用刷新间隔，因此是实时的。

第二个代码实际上使用了一个mysql数据源，并在折线图中显示了我数据库中的数据。但它不是实时的，因为它没有刷新间隔功能。

我试图将第一个代码的刷新间隔/图表更新代码部分传输到我的第二个不是实时但使用真实数据源的代码。

这是我的实时代码，随机数据点

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">` 
    <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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">` 
</script>
    <script type="text/javascript">

                    $().ready(function () {

                    $.getJSON("arduino_data.php", function (result) {

                    var dataPoints = [];

                    for (var i = 0; i <= result.length - 1; i++) {
                    dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
                    }

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

                    chart.render();
                    });

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

这是我到目前为止所尝试的内容：

<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 () {

                    $.getJSON("arduino_data.php", function (result) {

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

                var dataPoints = [];
                var updateInterval = 20;
                var dataLength = 500; // number of dataPoints visible at any point

                var updateChart = function (count) {
                          count = count || 1;

                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();     

        )};

        // 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>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

但它一直在说

第42行的意外标记'）'

            chart.render();     

    )};

我很尴尬，但由于所有的手镯/括号，我找不到解决方案。我尝试了一切。有）和没有}但似乎没有任何东西。

如果这个问题得到解决，代码的时间顺序是否正常？

编辑：解决了第一个问题，新问题：JS定位

<!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 () {

                    $.getJSON("arduino_data.php", function (result) {

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

                var dataPoints = [];
                var updateInterval = 20;
                var dataLength = 500; // number of dataPoints visible at any point

                var updateChart = function (count) {
                          count = count || 1;

                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();     

                });

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

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

输出：

找不到变量：updateChart

Answer 1

您使用)};代替});

在您的JS结尾处，您只使用了}而不是});

也可以像

一样调用你的图表

setInterval(updateChart, updateInterval);

并确保您的updateInterval位于正确的功能范围内以下是它的外观：

jQuery(function ($) {

    function updateChart( result ) { // move it here!!!
        $.getJSON("arduino_data.php", function( result ){
            var dataPoints = [];
            var dataLength = 500; // number of dataPoints visible at any point
            var updateInterval = 1000;
            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); 

});

如何正确传输Javascript代码？

1 个答案: