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

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

内容简介：本文将介绍如何使用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可视化时间序列数据（附代码、链接）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Don't Make Me Think

Steve Krug / New Riders Press / 18 August, 2005 / $35.00

Five years and more than 100,000 copies after it was first published, it's hard to imagine anyone working in Web design who hasn't read Steve Krug's "instant classic" on Web usability, but people are ......一起来看看《Don't Make Me Think》这本书的介绍吧!

码农工具