Languages: English • 简体中文 • 繁體中文

SensorThings API - 仪表图

SensorThings图形图表系列教程包含四个部分，这是

在之前的教程中，我们了解了如何制作折线图。在这部分教程中，我们将了解如何根据取回最新一笔的Datastream的Observation，并绘制在Highcharts仪表图上。

必需条件

  • 使用Highcharts库来制作仪表图库。
  • 以及jQuery库从SensorThings 服务器取回数据。

增加jQuery和highcharts函式库代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

第一步:
从SensorThings服务中取回最新一笔Datastream的Observation

如果我们想得到最新的数据，通常是将数据按照时间进行降序排序，那么第一条的数据就是最新的那条数据。 如果使用SensorThings API，类似的，使用$orderby查询选项按照$orderby=phenomenonTime desc对Observation进行降序排序，然后，在排序列表中使用$top获取第一个Observation

GET https://toronto-bike-snapshot.sensorup.com/v1.0/Datastreams(1504)/Observations?$orderby=phenomenonTime desc&$top=1

除了发送HTTP GET请求的URI不同，其他取回最新的Observations的代码与之前相同，代码如下：

var datastreamURI = "https://toronto-bike-snapshot.sensorup.com/v1.0/Datastreams(1504)";
$.getJSON(datastreamURI, function(datastream) {
  $.getJSON(datastream["Observations@iot.navigationLink"]+"?$orderby=phenomenonTime desc&$top=1", function(observations) {
    var data = $.map(observations.value, function(observation) {
      return parseFloat(observation.result);
    });
  });
});

现在，我们已经有了数据，开始准备绘制仪表图。

第二步：
准备制作仪表图

这里我们使用Highcharts的仪表图库，绘制仪表图需要设定几个参数，例如，面板，Y轴最大与最小值，等等。 仪表图构造函数有三个参数，第一个参数是仪表图的HTML容器的ID，第二个参数是JSON格式的仪表图配置选项，最后一个参数仪表图填充函数。

准备仪表图的代码如下： 

Highcharts.chart('chart', {
    //guage options
    chart: {
      type: 'gauge'
    },
    title: {
      text: 'Loading Chart Data...'
    },
    pane: {
      startAngle: -150,
      endAngle: 150
    },
    //the value axis
    yAxis: {
      min: 0,
      max: 20,
      title: {
        text: ''
      }
    },
    //Temp series
    series: [{
      data: [0],
      tooltip: {
        valueSuffix: ''
      }
    }]
  },
  function (chart) {});
);

最后一步:
加载最新的Observation到仪表图

我们已取回最新的Observations，现在将用Highcharts的updateSeries函数来加载数据到仪表图。 

chart.series[0].update({
  name: datastream.name,
  tooltip: {
    valueSuffix: " " + datastream.unitOfMeasurement.symbol
  }
});
//Add data to guage
chart.series[0].points[0].update(data);
//Update guage to have the unitOfMeasurement in it
chart.series[0].yAxis.update({
  title: {
    text: datastream.unitOfMeasurement.name + " (" + datastream.unitOfMeasurement.symbol + ")"
  }
});

然而，这样还不够，我们要定期取回最新的Observation并更新仪表图。为此，只需要使用JavaScript setInteval函数就实现。

第三个传递给构造函数的参数代码如下： 

function (chart) {
  if (!chart.renderer.forExport) {
    setInterval(function () {
      var datastreamURI = "https://toronto-bike-snapshot.sensorup.com/v1.0/Datastreams(1504)";
      // We start with a *link* to a datastream entity
      $.getJSON(datastreamURI, function(datastream) {
        //Set the guage title with Datastream description
        chart.setTitle({ text: datastream.description });
        // Retrieve latest Observation
        $.getJSON(datastream["Observations@iot.navigationLink"]+"?$orderby=phenomenonTime desc&$top=1", function(observations) {
          // Retrieve observations embedded in response by $expand function
          var data = $.map(observations.value, function(observation) {
            return parseFloat(observation.result);
          });
          // Update the temp Series
          chart.series[0].update({
            name: datastream.name,
            tooltip: {
              valueSuffix: " " + datastream.unitOfMeasurement.symbol
            }
          });
          //Add data to guage
          chart.series[0].points[0].update(data);
          //Update guage to have the unitOfMeasurement in it
          chart.series[0].yAxis.update({
            title: {
              text: datastream.unitOfMeasurement.name + " (" + datastream.unitOfMeasurement.symbol + ")"
            }
          });
        });
      });
    }, 1000);
  }
}

仪表图载入最新的Observation的结果如下:

在 SensorThings Share 上查看代码

总结：

在这个系列的教程中，我们介绍了SensorThings图形图表可视化的基本方法。假如您对于更多的SensorThings可视化有兴趣，我们有另外一系列的教程SensorThings绘制地图系列教程可供参考。