Question

我已经将温度传感器连接到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>

问题是这段代码不会移动，它只会在图形中添加新的数据点，因为这个图形变得太复杂而无法看到。

Answer 1

我可能在这里错了，但您首次加载页面时似乎只是清空了dps数组：

var dps = [];

当你使用setInterval函数时，似乎你在for循环中使用dps数组上的.push（）并且只使用.shift（）一次。我相信每次调用updateChart时都会在数组中添加一组十个，但每次只从数组中删除一个项目。这是对的吗？

如果是这样，在你的每个jquery循环中放入dps.shift（）行应该可以解决问题......

$.each(result,function(key,value) {
    dps.push({
        x: xVal,
        y: value
    });
    xVal++;
    dps.shift();
});

Answer 2

以下是我如何克服这个问题。

<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数组。在服务器端之后，我只检索单个值而不是数十个值。刚刚添加到数据点并按照以下方式进行移位。即。添加一个数据点并删除一个数据点。

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

如何实现传感器数据的实时图？

2 个答案: