如何正确传输Javascript码？

Question

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

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

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

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

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

但是它一直在说

Unexpected token ')' at line 42

            chart.render();     

    )};

我很尴尬，但由于所有 bracelets/parenthesizes，我找不到解决方案。我已经尝试了一切。有 ) 和没有 } 但似乎没有任何结果。

如果解决了，代码的时间顺序是不是就可以了？

编辑：第一个问题已解决，新问题：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>

输出：

Can't find variable: 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码？

How to transfer Javascript code correctly?

javascript

jquery

html

json

canvasjs