如何快速搭建 Node-RED 实时数据仪表盘：零基础入门指南 🚀
项目地址: https://gitcode.com/gh_mirrors/no/node-red-dashboard Node-RED Dashboard 是一款专为 Node-RED 设计的实时数据可视化工具，能够帮助用户快速创建直观的仪表盘界面。通过简单拖拽节点，即可将物联网设备数据、传感器读数或业务指标以图表、仪表等形式动态展示，无需复杂前端开发技能。
📋 准备工作：环境搭建必备条件
在开始使用 Node-RED Dashboard 前，请确保已安装 Node-RED 运行环境。该工具基于 Angular v1 开发，需 Node.js 12 或更高版本支持（最后支持 Node v8 的版本为 2.30.0）。
🔧 两种快速安装方式
方式一：通过 Node-RED 管理面板安装
- 打开 Node-RED 编辑器，点击右上角菜单 ≡ → 管理面板
- 在 安装 标签页搜索
node-red-dashboard - 点击 安装 并等待完成
方式二：命令行安装
在 Node-RED 用户目录（通常为 ~/.node-red）执行：
npm i node-red-dashboard
安装完成后重启 Node-RED，左侧节点面板将出现新的 ui_ 系列节点，右侧面板新增 仪表盘 选项卡。
🎯 基础配置与访问
默认访问地址
仪表盘默认路径为 Node-RED 根 URL 后添加 /ui，例如：
http://localhost:1880/ui
自定义路径设置
如需修改访问路径，编辑 Node-RED 配置文件 settings.js，添加：
ui: { path: "dashboard" }, // 自定义路径为 /dashboard
高级配置示例
可通过中间件实现请求日志、权限验证等功能：
ui: {
middleware: function (req, res, next) {
console.log('访问时间:', new Date().toISOString());
next(); // 必须调用 next() 继续请求处理
}
}
📊 核心功能与界面介绍
仪表盘编辑器界面
重启 Node-RED 后，右侧面板会出现 仪表盘 选项卡，包含三大核心配置区域：
Node-RED Dashboard 编辑界面，可拖拽配置组件布局
1. 布局管理（Layout）
- 标签页（Tabs）：可创建多个标签页分类展示不同数据
- 分组（Groups）：每个标签页下可创建分组，支持响应式布局
- 组件（Widgets）：拖拽节点到分组中，支持动态调整大小和位置
2. 站点设置（Site）
- 标题与外观：自定义页面标题、隐藏标题栏、启用触屏滑动切换
- 日期格式：设置图表时间轴格式（基于 moment.js）
- 网格尺寸：调整组件宽高单位（默认单位宽度 48px + 6px 间距）
3. 主题样式（Theme）
提供 浅色/深色/自定义 三种主题，支持字体自定义。通过 CSS 变量可深度定制样式，例如：
/* 在 ui_template 节点中添加自定义样式 */
.md-card {
background-color: var(--nr-dashboard-groupBackgroundColor);
border-color: var(--nr-dashboard-groupBorderColor);
}
🧩 常用组件与实战案例
核心组件类型
Node-RED Dashboard 提供 20+ 种预制组件，涵盖常用数据展示与交互需求：
| 组件类型 | 功能说明 | 典型应用场景 |
|---|---|---|
| ui_chart | 支持折线图/柱状图/饼图等 | 温度趋势、流量统计 |
| ui_gauge | 模拟仪表盘，支持四种显示模式 | 转速监控、电量指示 |
| ui_button | 触发型按钮，支持自定义图标和颜色 | 设备控制、场景切换 |
| ui_template | 自定义 HTML/JS 代码块 | 复杂布局、第三方库集成 |
图表组件使用示例
实时数据展示
只需向 ui_chart 节点发送包含数字的 msg.payload 即可：
{ "payload": 23.5 } // 单个数值
多系列折线图
通过 topic 区分不同数据系列：
{ "topic": "室内温度", "payload": 22.3 }
{ "topic": "室外温度", "payload": 18.7 }
历史数据批量展示
需按指定格式组织数据（参考 Charts.md）：
{
"series": ["A相电流", "B相电流"],
"labels": ["00:00", "00:15", "00:30"],
"data": [[12.5, 13.2, 12.9], [14.1, 13.8, 14.3]]
}
经典应用场景
1. 智能家居控制面板
通过 ui_switch、ui_slider 等节点实现灯光、窗帘远程控制，ui_gauge 显示温湿度数据
2. 工业设备监控
使用 ui_chart 展示设备运行趋势，ui_toast 实现异常报警，核心配置路径：
- 图表配置：nodes/ui_chart.js
- 报警组件：nodes/ui_toast.js
💡 实用技巧与最佳实践
布局优化建议
- 分组策略：按功能模块拆分多个小组而非单个大组，提升移动端适配性
- 响应式设计：组件宽度使用相对单位（1-12），避免固定像素值
- 模板复用：通过 ui_template 节点创建自定义组件库
性能优化
- 减少高频更新组件数量（建议采样间隔 ≥ 1秒）
- 对历史数据图表启用自动清理：
removeOlder: 1, removeOlderUnit: "3600"（保留1小时数据）
主题定制
通过 CSS 变量自定义颜色方案（完整变量列表见 README.md）：
:root {
--nr-dashboard-groupBackgroundColor: #f5f5f5;
--nr-dashboard-widgetColor: #2196f3;
}
🔗 生态扩展与资源
推荐配套节点
- node-red-contrib-chartjs：增强图表类型支持
- node-red-contrib-ui-svg：SVG 矢量图形动态绘制
- node-red-contrib-web-worldmap：地理位置数据可视化
学习资源
- 官方文档：Charts.md（图表数据格式详解）
- 示例流程：nodes/ui_chart.js（内置演示数据）
📝 注意事项
- 安全提示：生产环境建议通过
httpNodeAuth配置访问认证（详见 Node-RED 安全文档） - 多用户支持：仪表盘为单用户设计，所有客户端共享同一视图状态
- 版本说明：当前项目处于 "维护模式"，不提供重大功能更新，建议关注替代方案如 Flowfuse Dashboard
通过 Node-RED Dashboard，即使是非专业开发者也能在几分钟内构建出专业级数据仪表盘。立即尝试将你的数据转化为直观的可视化界面吧！ 📈
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
