0

温度センサーを BeagleBone Black [BBB] ボードに接続しました。1 秒間隔で温度を感知して BBB に渡し、beaglebone はそれを別のコンピューターの mysql データベースにダンプします。温度データをグラフ形式で表示したい。グラフは毎秒更新する必要があります。

c3、canvasJS などのさまざまなライブラリを試しましたが、リアルタイム更新で実装できませんでした。サンプル温度データ:

1:32

2:33

.

. . . すぐ..

以下は、私が試したcanvasJSコードです

window.onload = function() {

  var dps = []; // dataPoints

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Tempreture Input From XBee"
    },
    data: [{
      type: "line",
      dataPoints: dps
    }]
  });
  var xVal = 0;
  var updateInterval = 1000;
  var dataLength = 10; // number of dataPoints visible at any point

  var updateChart = function(count) {
    $.getJSON("http://localhost/smartfarm/admin/getGraphJson", function(result) {
      $.each(result, function(key, value) {
        dps.push({
          x: xVal,
          y: value
        });
        xVal++;
      });
    });
    dps.shift();
    chart.render();

  };

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

  // update chart after specified time.
  setInterval(function() {
    updateChart()
  }, updateInterval);

}
<div id="chartContainer" style="height: 300px; width:100%;"></div>

問題は、このコードがシフトしないことです。グラフが複雑になりすぎて見えなくなるため、グラフに新しいデータポイントを追加するだけです。

4

2 に答える 2

0

これが私が問題を克服する方法です。

<script type="text/javascript">
window.onload = function () {

  var dps = [
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
  ]; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer",{
    title :{
    text: "Tempreture Input From XBee"
    },
    data: [{
    type: "line",
    dataPoints: dps
    }]
  });
var xVal = 0;
var updateInterval = 1000;
var dataLength = 10; // number of dataPoints visible at any point

var updateChart = function (count) {
  $.getJSON("<?=base_url("admin/getGraphJson");?>", function (result) {
    //alert(result);
    $.each(result,function(key,value) {
      dps.push({
        x: xVal,
        y: value
      });
      xVal++;
    });
  });
  dps.shift();
  chart.render();
  //dps.length=0;

  if (dps.length >  20 )
  {
    dps.shift();
  }
};

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

// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);

}
</script>

dps[] datapoints 配列をいくつかの値で初期化します。間隔の後にサーバー側から、数十の値ではなく単一の値のみを取得しました。データポイントに追加し、配列をシフトするために次の配置を行いました。すなわち。1 つのデータポイントを追加し、1 つのデータポイントを削除します。

   if (dps.length >  70 )
   {
     dps.shift();
   }

于 2015-12-08T04:04:36.023 に答える