使用InfluxDB进行数据可视化：集成plotly.js

作者：Zoe Steinkamp / 产品，用例，开发者
2022年1月29日

InfluxData云平台的一大亮点是，它自带所有您需要快速读取和写入数据库的工具。在此，我们将通过InfluxDB和plotly.js创建数据可视化，了解如何使用基于d3.js和stack.gl的JavaScript图形库。（如果您需要查看使用Chart.js和InfluxDB进行时间序列数据可视化的教程，请点击链接。）

开始使用

在开始可视化之前，我们需要在我们的本地机器上设置一个InfluxDB实例。当你在Influx上创建账户时，你将想要创建一个桶，以便在其中存储你的时间序列数据并从中提取。当你拥有桶时，你可以访问/client-libraries/javascript-node页面，并可以获取一个有效的令牌，用于读取和写入你的桶。你还可以在这个页面上找到如何安装、设置和查询的示例。

从InfluxDB查询数据

当你开始你的项目时，你需要运行以下命令，这将初始化node项目，安装influx客户端并安装express。

npm init -y influx-node-app
npm i @influxdata/influxdb-client
npm install express --save

一旦你设置好了，InfluxDB正在运行，你可以设置一个文件来查询数据库并获取一些数据。我将使用Node/Express和influx-js客户端库来完成这个操作。在这个例子中，我将查询Telegraf为我的电脑收集的数据。如果你已经安装并运行了Telegraf，你应该能够做同样的事情。我预计你的package.json文件看起来像这样，注意我的主文件是app.js

在我的app.js文件中，我有以下内容。正如你所看到的，你需要添加你的组织电子邮件和你的秘密令牌，它需要添加到一个你不会公开推送到GitHub的令牌文件中。同时请注意你的influx url是什么，我的设置为us-west

最后，在app.js文件的其余部分

这是我的app.get函数来获取我的CPU总使用率。我使用了一个flux查询和一些过滤器函数来获取我想要显示的确切数据。我使用flux查询来过滤数据，因为这比在我们的应用程序中过滤数据更容易。我的flux查询是在InfluxDB Cloud的查询构建器中构建的。这使得构建我的简单查询变得容易，然后通过切换到脚本编辑器，我可以复制flux脚本。

从那里，数据被调用到我们的script.js文件中。

在这里，我有两个fetch函数，它们使用两个不同的Flux查询调用两个特定的数据源。我们解包数据，并且我们正在寻找时间和值作为图形中的x和y坐标。我们返回跟踪数据，这是我们的图形，它是一个包含x和y变量的数组。最后，一旦我们从influx接收了所有数据并准备好了我们的图形对象，我们调用Plotly来进行图形化。

如果添加更多的fetch数据调用，请将它们添加到我们的promise中，以便等待所有数据返回后，再制作Plotly图形。最后，我们使用两条线制作我们的Plotly线图。

设置HTML和CSS

在public文件夹目录中，你可以找到index.html、styles.css和scripts.js文件。我们将使用这些文件来显示plotly图形。在我们的index.html中，你会看到我们如何从script.js中附加图形

除了合并jQuery和你的脚本文件外，你还需要合并Plotly CDN。或者，你可以将plotly.js库作为npm模块安装。有关更多信息，请访问plotly.js网站上的“入门”指南。

让我们将以下CSS添加到styles.css文件中，以增加一些风格

此时，如果你重启服务器并导航到localhost:3000，你应该会看到类似这样的内容

哇！你已经成功创建了一个自定义的时间序列可视化，使用了InfluxDB和plotly.js！你可以在GitHub上查看源代码，或者直接发送邮件到[email protected]联系我。