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繪製地圖系列教程可供參考。