使用Highcharts库和InfluxDB可视化时间序列数据

作者：Anais Dotis-Georgiou / 用例，产品，开发者
2021年9月7日

导航到

How to visualize your time series data with the Highcharts Library and InfluxDB

如果您正在InfluxDB之上构建物联网应用程序，您可能会使用图形库来处理您的可视化需求。今天，我们将探讨图表库Highcharts，使用InfluxDB Cloud可视化我们的时间序列数据。然而，我也鼓励您查看Giraffe，这是一个基于React的可视化库，为InfluxDB 2.0 UI中的数据可视化提供动力。（如果您正在寻找使用Chart.js和InfluxDB可视化时间序列数据的教程，请点击链接。）

要求

要遵循本教程，您需要确保您有一个运行中的InfluxDB实例。本教程假设您已注册了一个免费层级的InfluxDB Cloud账户，但您也可以安装InfluxDB v2 OSS。

我最近发布了一篇关于influxdb-client-js库的入门指南，该库支持Node、浏览器和Deno环境。它涵盖了如何使用influxdb-client-js库查询和写入InfluxDB数据。在本教程中，我们将使用Highcharts从Hanalei、Hilo、Honolulu和Kahului写入、查询和可视化海洋潮汐数据。从此仓库运行项目。

使用Highcharts可视化时间序列数据的初步步骤

引入Highcharts库是我们的第一步。我在index.html文件的部分添加了以下script标签。

<script src="https://code.highcharts.com/highcharts.js"></script>

在index.html文件的部分，您需要一个具有“container”id的容器div，这样我们就可以在脚本文件中针对它，如下所示

<div id="container"></div>

Highcharts图形将在此容器中渲染。

在我们的服务器文件中，我们已设置了一个端点来查询我们的海洋潮汐数据库中的数据（见下文），因此我们将在脚本文件中获取数据并将其设置到Highcharts构造函数中。您必须首先实例化queryApi并使用queryRows方法查询InfluxDB，如JavaScript和InfluxDB 2.0入门中所述。

app.get('/api/v1/tide/:place', (request, response) => {
    const { place } = request.params;
    console.log(place)
    const results = []
    queryApi.queryRows(`from(bucket:"ocean_tides") |> range(start:0) |> filter(fn: (r) => r.location =~ /(?i)(${place})/)`, {
        next(row, tableMeta) {
            const o = tableMeta.toObject(row)
                // console.log(
                //     `${o._time} ${o._measurement} in '${o.location}': ${o._field}=${o._value}`
                // )
            results.push(o)
        },
        error(error) {
            console.error(error)
            console.log('\nFinished ERROR queryRows')
        },
        complete() {
            response.status(200).json(results)
            console.log('\nFinished SUCCESS queryRows')
        },
    })
});

在脚本文件中，此简单的fetch函数根据传入的位置名称检索数据。

const fetchData = (place) => {
  return fetch(`/api/v1/tide/${place}`)
    .then(res => {
      if (res.status !== 200) {
        console.log(res);
      }
      return res;
    })
    .then(res => res.json())
    .catch(error => console.log(error));
}

Promise.all() 用于获取四个不同位置的全部数据。接下来，结果被修改以适应参考Highcharts 文档中所需格式的格式。

return Promise.all([
            fetchData('hilo'),
            fetchData('hanalei'),
            fetchData('honolulu'),
            fetchData('kahului')
         ])
        .then(parsedRes => {
          const mutatedArray = parsedRes.map( arr => {
            return Object.assign({}, {
              name: arr[0].location,
              data: arr.map( obj => Object.assign({}, {
                x: (moment(obj._time).unix())*1000,
                y:obj._value
              }))
            });
          });
        })
        .catch(error => console.log(error));

现在我们已经成功查询和获取了我们的数据，我们可以构建我们的图表。

Highcharts.chart('container', {
            colors: ['#508991', '#175456', '#09BC8A', '#78CAD2'],
            chart: {
              backgroundColor: {
                  linearGradient: [0, 600, 0, 0],
                  stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(161, 210, 206)']
                  ]
              },
              type: 'spline'
            },
            title: {
              text: 'Hawaii Ocean Tides',
              style: {
                'color': '#175456',
              }
            },
            xAxis: {
              type: 'datetime'
            },
            yAxis: {
              title: {
                text: 'Height (ft)'
              }
            },
            plotOptions: {
              series: {
                turboThreshold: 2000,
              }
            },
            series: mutatedArray
          });

让我们分析这段代码。chart()方法接受两个参数

要在其中渲染图表的目标元素。
一个选项对象，在其中您可以指定各种属性，例如样式、标题、图例、序列、类型、plotOptions等。选项包括
- colors: [数组] – 颜色属性接受一个十六进制代码数组，该数组将代表图表的默认颜色方案。如果所有颜色都用完了，任何新的颜色需求都将导致数组再次循环。
- chart: {对象} – chart属性接受一个对象，该对象包含类型、缩放类型、动画、事件、描述以及许多样式属性等附加属性。在这个例子中，我给了背景一个线性渐变，并指定了类型为spline。
- title: {对象} – 这代表图表的主要标题，并且可以额外给出一个样式对象来使事情更加生动。
- xAxis: {对象} – 在这个场景中，因为我使用的是时间序列数据，我知道x轴总是时间，所以我可以将类型指定为'datetime'，并且刻度将自动调整到适当的时间单位。然而，这里有许多其他选项，包括样式、标签、自定义刻度位置和对数或线性类型。
- yAxis: {对象} – 与xAxis属性类似，y轴也接受一个对象，并且可以访问许多用于自定义图表y轴的设计和样式的选项。在这种情况下，我只指定了y轴标题，并且推迟了Highcharts的自动刻度放置。
- plotOptions: {对象} – plotOptions属性是一个包装对象，用于每个序列类型的配置对象。每个序列的配置对象也可以在series数组中针对单个序列项进行覆盖。在这里，我使用了plotOptions.series属性来覆盖默认的turboThreshold 1000，并将其更改为2000。这允许图表有更多的数据点（超过默认的1000个）。根据文档，系列配置选项在三个不同的级别可以访问。如果您想针对图表中的所有系列，您将使用plotOptions.series对象。对于特定类型的系列，您将访问该类型的plotOptions。例如，要针对类型为'line'的图表的plotOptions，您将访问plotOptions.line对象。最后，特定系列的选项在series属性中给出（请参阅下一条要点）。
- series: [数组]或{对象} – 这是您将传递数据的地方。您还可以定义要传递的数据的类型，给它一个名称，并定义额外的plotOptions。

这就是最终结果！

<figcaption>使用 Highcharts 和 InfluxDB 可视化海洋潮汐物联网数据</figcaption>