运行时动态修改 TSDB 查询参数

更新时间：2022-12-01

在另一篇最佳实践“数据源接入之 TSDB”中，我们配置的参数为“city”为“bj”。自然的，仪表盘在运行时，只会拿到“bj”的数据。

那么，如何在仪表盘运行时修改查询参数，使其展示“gz”的数据，而不修改数据表配置+重新保存仪表盘？这就需要写一些代码了。

本文演示了如何使用 SDK 的方式将制作好的仪表盘嵌入到现有的网页中，并使用 SDK 提供的若干接口动态地修改仪表盘中数据表的查询参数。

本例是“数据源接入之 TSDB”例子的后续。
为了让修改查询参数产生的效果更加明显，我们继续编辑该仪表盘，进入“画布”：

右键菜单点击“新标签打开图片”可以查看大图

从左侧“文本”类的组件中选择“标题文本”拖动到画布上：

和“时序折线图”数据绑定的操作类似，在右侧面板选择“数据绑定”，并点击“文本”右侧的小图标：

在弹出的窗口中配置绑定参数，本例继续使用“天气数据”作为事例，并第一行第三列的单元格作为数据绑定来源：

点击“确定”完成绑定，回到画布，发现文本组件已经被填充上了刚才单元格里的“bj”字符串：

调整组件的样式，使其更加显眼一点：

至此，仪表盘制作完成。接下来我们将仪表盘嵌入到本地网页。

回到仪表盘列表页（卡片页），找到我们之前制作完成的仪表盘，点击仪表盘卡片下方工具栏中的“发布”按钮：

不加密，直接发布：

点击卡片中的“生成代码”按钮：

复制弹窗中的代码：

不难发现，这段代码构建了一个空白网页，并引入了物可视的 JS SDK 文件。稍后访问该文件，会看到我们制作的仪表盘被显示在网页上。

在本地任意目录新建一个名为 demo_update_tsdb_config.html 的文件，并将刚才复制的代码拷贝其中保存：

您可以随意命名该文件，后续保持一致即可。

为了正常访问本地 HTML 文件，我们需要一台静态资源服务器，本例选用 serve。在上述 HTML 文件所在的目录，执行：

当然可以选择其他的静态资源服务器

npx serve .

访问http://localhost:5000/demo_update_tsdb_config.html：

可以看到仪表盘已经正常运行起来了。接下来我们将修改部分代码，动态地修改查询参数，而不用重新回到画布进行编辑。

找到第 50 行的myDashboard.getDashboardConfig().then(function(config){代码：

由于这一段嵌入代码可能会被更新，代码行数请以实际行数为准。

getDashboardConfig是物可视 JS SDK 提供的用于查询“仪表盘配置”的方法（文档在这里）。打开浏览器的调试器，可以看到打印出了（一个复杂的）对象，这个对象描述了物可视仪表盘的配置：有哪些可视化组件、有哪些数据表、数据表的配置是什么等。既然我们已经拿到了配置，接下来的任务就很直观了，修改此配置，并将其写回（通过 updateDataTableConfig 方法，文档在这里）。