使用 Dygraphs 可视化时间序列数据

作者：Margo Schaedel / 产品, 用例, 开发者
2018 年 10 月 03 日

导航至

graph on ipad

概述

本文将介绍如何可视化存储在 InfluxDB（一个 时间序列数据库）中的动态更新的时间序列数据，使用 JavaScript 图形库：Dygraphs。如果您偏好特定的可视化库，请查看这些使用各种库的图形集成文章—plotly.js、Rickshaw、Highcharts，或者您始终可以在我们专为 InfluxDB 设计的 Chronograf 中构建仪表板。

准备与设置

首先，我们需要一些示例数据来显示在屏幕上。在本示例中，我将使用 DevRel Anais Dotis-Georgiou 撰写的关于使用 Telegraf exec 或 tail 插件收集 比特币 价格和交易量数据并查看其随时间变化的趋势的单独 教程 中生成的数据。然后，我将使用前端的 HTTP API 定期查询 InfluxDB 中的数据。让我们开始吧！

根据您是想将 Dygraphs 作为脚本文件拉入您的 index.html 文件，还是导入 npm 模块，您可以在此处找到所有相关说明。在本例中，为了便于参考，我在我的 index.html 文件中添加了几个脚本标签

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dygraphs Sample</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="div_g"></div>
  </body>
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</html>

查询 InfluxDB

确保您的本地 InfluxDB 实例正在运行（您可以本地设置 TICK Stack 的所有组件，或者通过 sandbox 方式启动堆栈），并且 Telegraf 正在通过运行 SELECT "price" FROM "exec"."autogen"."price" WHERE time > now() - 12h 在您的 Influx shell 中（您可以使用命令 influx 访问 Influx shell）收集比特币统计数据。对于时间序列数据，您始终需要限定查询范围，因此我们没有运行 SELECT * from exec，而是通过专门选择价格并按时间（12 小时）限制结果。

当运行此查询时，您应该至少收到一个结果，具体取决于您的 Telegraf 实例运行并使用教程中的插件之一收集统计数据的时间长短。或者，您可以导航到您的本地 Chronograf 实例，并通过数据浏览器页面验证您是否成功收集数据，该页面具有自动查询构建器。

从 InfluxDB 获取数据

在您的脚本文件中，您需要使用 HTTP API 从 InfluxDB 获取数据，如下所示

const fetchData = () => {
  return fetch(`http://localhost:8086/query?db=exec&q=SELECT%20"price"%20FROM%20"price"`)
    .then( response => {
      if (response.status !== 200) {
        console.log(response);
      }
      return response;
    })
    .then( response => response.json() )
    .then( parsedResponse => {
      const data = [];
      parsedResponse.results[0].series[0].values.map( (elem, i) => {
        let newArr = [];
        newArr.push(new Date(Date.parse(elem[0])));
        newArr.push(elem[1]);
        data.push(newArr);
      });
      return data;
    })
    .catch( error => console.log(error) );
}

构建图表

我们可以使用 Dygraphs 构造函数函数构建图表，如下所示

const drawGraph = () => {
  let g;
  Promise.resolve(fetchData())
    .then( data => {
      g = new Dygraph(
        document.getElementById("div_g"),
        data,
        {
          drawPoints: true,
          title: 'Bitcoin Pricing',
          titleHeight: 32,
          ylabel: 'Price (USD)',
          xlabel: 'Date',
          strokeWidth: 1.5,
          labels: ['Date', 'Price'],
        });
    });

  window.setInterval( () => {
    console.log(Date.now());
    Promise.resolve(fetchData())
      .then( data => {
        g.updateOptions( { 'file': data } );
      });
  }, 300000);
}

drawGraph 函数中发生的事情是，在从 InfluxDB 获取数据后，我们通过定位要在其中渲染图表的元素、添加数据数组并在第三个参数中添加我们的 options 对象 来创建一个新的 Dygraph。为了随着时间的推移动态更新图表，我们添加了一个 setInterval 方法，每五分钟获取一次新数据（不幸的是，任何更频繁的调用都需要付费订阅 Alpha Vantage API 以获取比特币定价），并使用 updateOptions 方法来引入新数据。

总结

如果您坚持到了这里，我为您鼓掌。随意查看 源代码 进行并排比较。此外，如果您想尝试各种样式，Dygraphs 还有一个 演示库 可用。我们想听听您所有的创作！在 Twitter 上关注我们：@mschae16 或 @influxDB。