使用 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 文件中，我有以下内容。正如您所见，您需要添加您的 org 电子邮件和您的密钥令牌，它需要添加到您不公开推送到 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 上查看源代码，或者随时通过电子邮件 ping 我：[email protected]。