手把手教你使用Dygraphs可视化时间序列数据（附代码、链接）

栏目: JavaScript · 发布时间: 5年前

内容简介：本文将介绍如何使用JavaScript图形库：Dygraphs来动态地可视化更新存储在InfluxDB（时间序列数据库）中不断更新的时间序列数据。如果你偏爱某个可视化库，你可以查看plotly.js，Rickshaw，Highcharts这些库的帖子，或者你也可以在我们专为InfluxDB设计的Chronograf中构建一个仪表板。首先，我们需要把一些示例数据显示在屏幕上。比如这个例子，我将使用由DevRel Anais Dotis-Georgiou独立编写的教程中的数据，使用Telegraf 编写的ex

概述

本文将介绍如何使用JavaScript图形库：Dygraphs来动态地可视化更新存储在InfluxDB（时间序列数据库）中不断更新的时间序列数据。如果你偏爱某个可视化库，你可以查看plotly.js，Rickshaw，Highcharts这些库的帖子，或者你也可以在我们专为InfluxDB设计的Chronograf中构建一个仪表板。

准备和开始

首先，我们需要把一些示例数据显示在屏幕上。比如这个例子，我将使用由DevRel Anais Dotis-Georgiou独立编写的教程中的数据，使用Telegraf 编写的exec或尾部插件来收集比特币价格和体积数据，并查看它随时间变化的趋势。然后，我将使用前端的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.com/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堆栈找到所有组件，或者以沙盒方式启动堆栈），并且确保Telegraf正在Influx shell中通过运行 SELECT "price" FROM "exec"."autogen"."price" WHERE time > now() - 12h指令来收集比特币统计数据（你可以使用命令‘Influx’访问Influx shell）。对于时间序列数据，你总是希望控制查询范围，因此我们通过专门筛选价格和时间（12小时）来限制我们的结果，而不是直接运行SELECT * from exec。

运行此查询时，你至少会得到一个结果，具体取决于你的Telegraf实例的运行时间以及通过教程所述的一个插件收集统计信息的时长。或者，你可以导航到本地的Chronograf实例，并通过Data Explorer页面的自动查询构建器来验证你是否成功收集了数据。

从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 constructor 函数来构建图，如下所示：

const drawGraph = () => {

let g;

Promise.resolve(fetchData())

.then( data => {

g = new Dygraph(

document.getElementById("div_g"),

data,

{

drawPoints: true,

title: 'BitcoinPricing',

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获取数据，然后我们通过定位在其中呈现图形的元素创建了一个新的Dygraph，添加数据数组，并在我们的选项对象中添加第三个参数。为了随着时间动态地更新图形，我们添加了一个setInterval方法来每五分钟获取一次新数据（不幸的是，更高频率的调用需要付费订阅比特币定价的Alpha Vantage API）并使用updateOptions方法引入新数据。

手把手教你使用Dygraphs可视化时间序列数据（附代码、链接）

总结

如果你已经做到了这一步，我会为你鼓掌。请随意查看源代码以便进行相同类型的比较。此外，如果你想尝试各种风格，Dygraphs提供了一个演示库。我们希望了解你的创作！在Twitter上找到我们：@ mschae16 或 @influxDB。

原文标题：

Visualizing Time Series Data With Dygraphs

原文链接：

https://dzone.com/articles/visualizing-time-series-data-with-dygraphs

以上所述就是小编给大家介绍的《手把手教你使用Dygraphs可视化时间序列数据（附代码、链接）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

深入浅出 MFC 第二版

侯俊杰 / 松岗 / 1997.05

深入浅出MFC是一本介绍 MFC（Microsoft Foundation Classes）程式设计技术的书籍。对於 Windows 应用软体的开发感到兴趣，并欲使用 Visual C++ 整合环境的视觉开发工具，以 MFC 为程式基础的人，都可以从此书获得最根本最重要的知识与实例。如果你是一位对 Application Framework 和物件导向（Object Orien......一起来看看《深入浅出 MFC 第二版》这本书的介绍吧!

码农工具