2017-08-12 1 views
0

私はWebベースのビジュアライゼーションツールを初めて使用しました。以前はchartjsを使用していましたが、chartjsのソリューションは見つからなかったので、canvasjs.Nowに転送しました。私はデータベースからのデータが絶えず動いているので、爽やかに動かさないようにしたいと思っています。ここに私のコードは次のとおりです。canvasjsデータベースからライブデータを更新しています

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> 


    <script type="text/javascript"> 
    window.onload = function() { 
     $.getJSON("json.php", function(result){ 
     var dps= []; 

//Insert Array Assignment function here 
for(var i=0; i<result.length;i++) { 
    dps.push({"label":result[i].ts, "y":result[i].ph}); 
} 

//Insert Chart-making function here 
var chart = new CanvasJS.Chart("chartContainer", { 
    zoomEnabled:true, 
    panEnabled:true, 
    animationEnabled:true, 
    title:{ 
     text: "myChart from mySQL database" 
    }, 

    axisX:{ 
     title: "TimeStamp" 
    }, 

     axisY:{ 
     title: "myDataPoints", 
     minimum: 0 
    }, 

    data: [{ 
     type: "spline", 
     dataPoints: 
      dps 
       }] 
}); 
chart.render(); 

}); 
    } 
    </script> 
</head> 
<body> 

    <div id="chartContainer" style="width: 800px; height: 380px;"></div> 

</body> 
</html> 

今、私は...私は移動するこのチャートを維持する必要がありますどのようにそこに助けをお願いしたいと思います?

答えて

2

行を移動する場合は、配列の先頭からdataPointsを削除する必要があります。あなたはJSのshift関数を使ってそうすることができます。

for(var i=0; i<result.length;i++) { 
    dps.push({"label":result[i].ts, "y":result[i].ph}); 
    dps.shift(); 
} 

これはあなたのためのトリックです。

+0

hai @beevk。私は誰かが答えるのを待っていた返事にとても感謝しています。 dps.shift()関数を追加しようとしましたが、何も表示されず、何も表示されません。 .shift()関数を追加する以外に、作るために何をする必要がありますか? – njhelloworld

+0

何も表示されていないと言ったらどういう意味ですか?それは何らかのエラーを投げますか?コンソールを調べてエラーがないか調べます。また、実際に動きのパターンを視覚化したい場合は、ループがあなたのために働くことはありません。変化が起こっているのを見ることができないからです。何らかの間隔でJSONファイルを呼び出して読んで、変更を探してチャートを再描画する必要があります。 – Beevk

+0

返信いただきありがとうございます。私はちょうど提案したforループで私のforループを変更します.. – njhelloworld

関連する問題