Fatal编程技术网
  • javascript/
  • 如何正确传输Javascript代码？

如何正确传输Javascript代码？

javascript jquery html json

如何正确传输Javascript代码？,javascript,jquery,html,json,canvasjs,Javascript,Jquery,Html,Json,Canvasjs,我有两个代码，都生成一个折线图。然而，第一个不使用mysql数据源，它使用随机数学生成的数据点。但它使用刷新间隔，因此是活动的 第二段代码实际上使用了mysql数据源，并在折线图中显示了我数据库中的数据。但是它不是活动的，因为它没有刷新间隔功能 我试图将第一段代码的刷新间隔/图表更新代码部分转移到第二段代码中，这段代码不是实时的，而是使用真实的数据源 这是我的实时代码，带有随机数据点： <script type="text/javascript" src="https://cdnjs.cl

我有两个代码，都生成一个折线图。然而，第一个不使用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>
我很尴尬，但由于所有的手镯/括号，我找不到解决办法。我什么都试过了。有）没有}但似乎什么都不能实现

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

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


$（）.ready（函数（）{
$.getJSON（“arduino_data.php”），函数（结果）{
var chart=new CanvasJS.chart（“chartContainer”{
标题：{
文字：“患者#01”
},          
数据：[{
键入：“行”，
数据点：数据点
}]
});
var数据点=[]；
var updateInterval=20；
var dataLength=500；//任意点可见的数据点数量
var updateChart=函数（计数）{
计数=计数| | 1；
对于（变量i=0；i数据长度）
{
dataPoints.shift（）；
}
chart.render（）；
});
//生成第一组数据点
updateChart（数据长度）；
//在指定时间后更新图表。
setInterval（updateChart、updateInterval）；
});
输出：

找不到变量：updateChart

您使用了
）}而不是
}）

同样，在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); 

});



jQuery（函数（$）{
函数updateChart（结果）{//将其移到此处！！！
$.getJSON（“arduino_data.php”），函数（结果）{
var数据点=[]；
var dataLength=500；//任意点可见的数据点数量
var updateInterval=1000；
var chart=new CanvasJS.chart（“chartContainer”，{//new chart对象
标题：{
文字：“患者#01”
},          
数据：[{
键入：“行”，
数据点：数据点
}]
});
对于（变量i=0；i数据长度）{
dataPoints.shift（）；
}        
chart.render（）；
}); 
}
//首次读启动
updateChart（）；
//在指定时间后更新图表。
setInterval（updateChart、updateInterval）；
});

您说找不到第42行？如果正确缩进JS，即使在记事本中也很难发现这些错误；	)};         无论我在那里做了什么更改，它都不会工作
chart.render（）；）}最后一个应该是
}）和之后
setInterval（）应该有相同的
}）谢谢，它成功了。但是现在它说（我因为定位而害怕）：ReferenceError：找不到变量：updateChart谢谢，它成功了。我已经看得太久了，无法监督这件事。。它现在说：谢谢，它成功了。但是现在它说（我因为定位而害怕）：ReferenceError：找不到variable:updateChart这就是我的主要问题，因为我不熟悉javascript。我已经注意到，定位是相当重要的JS@MieerDarwesh是的，因为你们需要在你们的职责范围之外创建你们的功能getJson@MieerDarwesh只是一个问题。。。间隔实际上应该做什么？每n次Ping一次arduino数据？请参阅
count
参数？您总是将其设置为1，但从不使用count参数variable@MieerDarwesh我相信您可以将图表对象实例保留在该函数之外，但是再次。。。我不能测试。

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

});