使用 draw.io 创建数据驱动型图表
结合 diagrams.net 或 draw.io 以及脚本和数据源，您可以创建数据驱动的图表，其中包含颜色、形状、文本标签，甚至动画，这些都会随着实时数据的变化而变化。
除了云网络基础设施的实时图表和数据可视化图表之外，真正意义上的数据驱动型图表寥寥无几。由于 draw.io 不包含电子表格或图表功能（它只是一个图表编辑器），因此无法实现动态更新的图表。
您可以编写自己的脚本或与其他应用程序集成，以实现数据驱动的图表，其中图表形状会随着实时数据而变化，因为 draw.io 是开源的，并且.drawio图表格式使用可访问的 XML。
工作原理
draw.io 图表中的每个形状都有一个唯一的形状 ID。
由于图表数据使用 XML 标签存储在您的文件中，因此您可以使用脚本在 XML 源中搜索形状 ID，并将常见的形状属性替换为不同的值，以反映当时的数据。
你需要准备什么
在draw.io 编辑器中创建并保存为 XML 文件的图表
执行以下操作的应用程序或脚本：
显示并刷新图表
查询或读取实时数据
分析数据值，并根据预设规则更新图表中的形状属性。
示例 - 工厂平面图
为了向您展示如何构建这样的数据驱动图表，我们将使用一个仪表板示例，该仪表板根据来自机器的实时传感器数据显示工厂平面图上机器的状态。
本示例使用Grafana和 Arnaud Genty 的流程图插件，将数据库中记录的实时传感器数据提供给脚本，脚本根据我们定义的规则更新图表中的形状。
绘制图表并设置数据输入。
您可以使用draw.io 在线版或我们的 draw.io 应用之一来创建图表。
您可以绘制任何类型的图表——流程图、线框图、平面图、组织结构图、接线图等等。
避免使用复杂形状来更新元素。包含多个字段的元素，例如表格、实体形状或泳道，通常没有可供后续引用的唯一 ID。
在这个例子中，我们创建了一个工厂平面图，用简单的文本形状来显示重要的机器信息。
设置自定义唯一形状 ID
对于每个会根据数据源动态更新的形状，您应该覆盖自动分配的形状 ID，以便以后更容易引用。
右键单击形状并选择“编辑数据”。或者，选择一个形状并按
Ctrl+M或Cmd+M。按住
Shift并双击顶部的ID字符串。将形状 ID 更改为更易于记忆的名称 -确保它是唯一的。
单击“应用”保存新的形状 ID，然后单击“应用”保存形状数据。
在我们的示例中，所有包含“to”字样的文本形状Text都需要更新。每个文本形状都已分配了一个新的自定义唯一形状 ID。
在“样式”选项卡的“属性”部分查看形状 ID 。
将图表导出为 XML 文件
您需要读取（并复制）图表的完整 XML 源代码，因此请将其导出为 XML 文件，以便可以用文本编辑器轻松打开。
从菜单中选择“文件”>“导出为”>“XML” 。
将文件保存到本地设备。
创建动态仪表板
将图表添加到仪表板
.xml用文本编辑器打开之前保存的图表文件。复制初始标签之后出现的所有图表数据
<?xml ... >。现在，将图表数据添加到Grafana 的流程图面板中。
将编辑器 URL 和主题设置为我们的在线服务
embed.diagrams.net，并从下拉列表中选择Dark“或” 。如果您运行自己的 draw.io 服务器，请使用其 URL。Light将源类型设置为
XML.在“源内容”文本字段中，粘贴您从文本编辑器复制的图表数据。
图表将显示在仪表盘预览面板中。
将图表形状 ID 映射到具有规则的数据查询
现在，您需要将要更新的图表形状与数据源的查询以及在流程图面板中定义的规则联系起来。
编写查询语句，从数据源中提取所需数据。将指标名称设置为
shape ID它所更新的图表名称，以便更清晰地显示哪个查询更新了哪个图表形状。在映射部分为每个查询 设置行为。
设置“识别方式”为“to”
ID，因为这是我们识别特定形状的方式。启用正则表达式并添加一些规则。在规则的“内容”
shape ID字段中，输入要更新的形状的具体信息。
形状标签根据最新的数据库值显示为“活动”或“停止”。
如果您在执行此步骤时需要帮助，请参阅流程图映射文档。
您可以更改形状的颜色或工具提示、文本标签或链接，或者添加动画。
现在，当您的仪表板运行且数据查询更新时，您的图表将根据您设置的规则进行更新。
更多数据驱动型图表示例
在流程图插件中选择一个实时示例图表。
展开标题并选择“编辑”以查看其设置方式。