1

2 つのコードがあり、どちらも折れ線グラフを生成します。ただし、最初のものは mysql データソースを使用せず、ランダムな数学で生成されたデータポイントを使用します。ただし、更新間隔を使用するため、ライブです。

2 番目のコードは、実際には mysql データソースを使用し、データベースのデータを折れ線グラフで表示します。ただし、ライブではないため、更新間隔機能はありません。

最初のコードの refresh-Interval / chart-update コード部分を、ライブではないが実際のデータ ソースを使用する 2 番目のコードに転送しようとしていました。

ランダムなデータポイントを使用した私のライブコードは次のとおりです。

<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

4

1 に答える 1

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

});
于 2015-06-20T19:02:03.723 に答える