Node-RED 是一个流程编程工具，用于创建 IoT 和物联网应用程序。Node-RED 可以通过添加和配置节点完成各种任务。Node-RED 提供了丰富的节点库，其中包括可视化节点库。本文将介绍一款可视化节点库 npm 包 node-red-contrib-ui-lineargauge，这是一款线性测量仪控制节点，用于在 Node-RED 流程中创建仪表盘。
仪表盘的基本介绍
在介绍仪表盘控件之前，我们先来了解一下仪表盘的基本概念。仪表盘通常用于显示实时数据。在 IoT 和物联网应用程序中，仪表盘可以用于显示温度、湿度、压力、电流等数据。仪表盘通常分为以下两部分：
- 表盘：即仪表盘的背景，用于显示当前值与最大值之间的比例。
- 指针：即仪表盘的指示器，用于指示当前值。
npm 包 node-red-contrib-ui-lineargauge 的安装
npm 包 node-red-contrib-ui-lineargauge 是一款免费的可视化控件。要使用这款控件，需要先安装 Node-RED。Node-RED 的安装可以参考官方文档，此处不再赘述。安装完成 Node-RED 后，可以使用以下命令安装 node-red-contrib-ui-lineargauge：
npm install node-red-contrib-ui-lineargauge
npm 包 node-red-contrib-ui-lineargauge 的使用
安装完成 node-red-contrib-ui-lineargauge 后，可以在 Node-RED 编辑器的右上方单击菜单栏中的“菜单”按钮，然后单击“管理面板”打开管理面板。在管理面板的“面板”选项卡中，可以看到已安装的可视化控件。找到 node-red-contrib-ui-lineargauge 并单击“启用”。
在 Node-RED 编辑器中创建新的流程或编辑现有流程。从节点库中拖动 node-red-contrib-ui-lineargauge 控件到画布中。单击控件以修改设置。可以设置向量图、数据类型、轴范围和颜色等参数。
以下是一个示例代码，该代码演示如何用 node-red-contrib-ui-lineargauge 控件显示温度：
[{"id":"6c305e6f.2652e","type":"function","z":"90c10280.fb8a68","name":"温度随机数","func":"msg.payload = {value: Math.round(Math.random() * 100)};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":507,"y":224,"wires":[["bd8598ee.4e9d9"]]},{"id":"bd8598ee.4e9d9","type":"ui_lineargauge","z":"90c10280.fb8a68","name":"温度","group":"517c81bc.94f548","order":0,"width":"6","height":"1","gtype":"gage","title":"温度","label":"°C","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":733,"y":224,"wires":[]},{"id":"d3bc3708.5b5c5","type":"inject","z":"90c10280.fb8a68","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":307,"y":224,"wires":[["6c305e6f.2652e"]]},{"id":"517c81bc.94f548","type":"ui_group","name":"示例组","tab":"9b630e62.459d4","order":1,"disp":true,"width":"12","collapse":false},{"id":"9b630e62.459d4","type":"ui_tab","name":"示例","icon":"dashboard","disabled":false,"hidden":false}]在上例中，一个随机数生成器节点用来生成一个随机数。温度控件 节点接收随机数的值 msg.payload.value。修改 node-red-contrib-ui-lineargauge 控件的设置，让其显示温度范围为 0~100 度。该温度控件节点将温度值显示在线性仪表盘上。
结语
本文介绍了 npm 包 node-red-contrib-ui-lineargauge 的安装和使用方法。通过使用 node-red-contrib-ui-lineargauge，我们可以在 Node-RED 流程中创建仪表盘。仪表盘用于显示实时数据，并可设置各种参数，以便更好地显示数据。该节点库使创建仪表盘变得简单易行，为广大 Node-RED 用户带来了许多便利。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b73