如何在Node-RED中通过Payload切换ui_chart的图表类型

核心思路 #

Node-RED的ui_chart节点支持通过msg.ui_control消息动态修改图表配置，其中chartType字段可指定为line（折线图）或bar（柱状图）。我们只需在点击对应按钮时，给后续流程传递包含目标图表类型的ui_control消息，最终转发给ui_chart节点即可。

具体修改步骤 #

1. 修改按钮后的Change节点，添加图表类型配置

分别调整两个按钮对应的Change节点，增加设置msg.ui_control的规则：

• 针对“60 Minutes”按钮的Change节点（ID: 59ac8b2b32f26664）
  添加一条规则：

  • 类型：set
  • 属性：ui_control
  • 属性类型：msg
  • 值：{"chartType": "line"}
  • 值类型：json

• 针对“24 Heures”按钮的Change节点（ID: 135e25359841e246）
  添加一条规则：

  • 类型：set
  • 属性：ui_control
  • 属性类型：msg
  • 值：{"chartType": "bar"}
  • 值类型：json

2. 确保ui_control消息传递到ui_chart节点

当前流程中，数据经过join和change节点时，msg.ui_control不会被覆盖（这些节点仅修改payload字段），修改后的ui_control会自动传递到最终的ui_chart节点。点击按钮后，图表会先加载对应时间段的数据，同时切换为指定的图表类型。

验证修改 #

点击“60 Minutes”按钮，图表加载最近1小时数据并显示为折线图；点击“24 Heures”按钮，图表加载最近24小时数据并切换为柱状图。

修改后的关键节点示例（Change节点） #

以“60 Minutes”对应的Change节点为例，修改后的配置如下：

{
    "id": "59ac8b2b32f26664",
    "type": "change",
    "z": "38b4959d8b6fda96",
    "name": "",
    "rules": [
        {
            "t": "set",
            "p": "payload",
            "pt": "msg",
            "to": "DropDownMenu2",
            "tot": "flow"
        },
        {
            "t": "set",
            "p": "ui_control",
            "pt": "msg",
            "to": "{\"chartType\": \"line\"}",
            "tot": "json"
        }
    ],
    "action": "",
    "property": "",
    "from": "",
    "to": "",
    "reg": false,
    "x": 680,
    "y": 540,
    "wires": [
        [
            "80b322d805e85ddb"
        ]
    ]
}

内容的提问来源于stack exchange，提问作者Antoine Labarre