Node-RED系列（十一）：Node-RED面板chart节点的使用案例

Node-RED系列文章目前已经写了9篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章

物联网平台Node-RED系列（一）：Node-RED的介绍与安装

物联网平台Node-RED系列（二）：Node-RED的面板的操作

物联网平台Node-RED系列（三）：Node-RED公共节点的使用

物联网平台Node-RED系列（四）：Node-RED函数节点的使用

物联网平台Node-RED系列（五）：Node-RED序列节点的使用

物联网平台Node-RED系列（六）：Node-RED解析节点的使用

物联网平台Node-RED系列（七）：Node-RED存储节点的使用

物联网平台Node-RED系列（八）：Node-RED网络节点的使用

Node-RED系列（九）：Node-RED面板dashboard节点的使用

Node-RED系列（十）：Node-RED面板dashboard节点的配置

上一期我给大家简单介绍了dashboard是如何排版的，以及其中的图标如何使用，所有节点的简介。能够组成的面板。本篇文章我就带大家使用chart节点来定制一个动态图表。实时监控一个设备的CPU使用率。

废话不多说，直接上干货。

思路是这样的

首先使用一个inject节点，定时向触发整个流，然后输出到一个function节点里,function节点里是用于生产随机数的。 为了使图表看起来不太难看，随机数的分布在80-100之间。如果是分布在0-100的话，图表在短时间内会非常陡峭，不太符合实际情况，而且不美观。 所以我们选择将cpu的值控制在80-100. 具体的function节点的js代码是

msg.payload = Math.floor( Math.random()*20)+80 return msg;

然后后面紧接一个chart节点。这样设计就能将payload当做y轴的值传入到chart节点中。 下面是chart节点的配置参数。

首先每一个chart节点都要属于一个Group，并且属于 一个Tab， 其次size选择auto，这样图表就会自动铺满整个group.

label 是图表的标题。会显示在图表的上方。

Type 是用于选择图表的类型，目前有6个类型的图表可供选择，分别是

Line chart 折线图 Bar chart 柱形图 Bar chart（H） 柱形图 Pie chart 扇形 Polar area chart 扇形 Radar chart 扇形图

注意每个图表类型的配置都不太一致。注意区分。

Y-axis 规定y轴的区间， 因为是CPU使用率，所以填写 min = 0， max = 100

Legend 是否显示图例，就是每个图例的类型声明，点击可以隐藏该图例。

Series Colours 图例的颜色，如果有多个图例的话，就会按照该颜色的排序来显示。可以点击修改。

节点的联系图

完整的流配置json文件

[ { “id”: “f6f2187d.f17ca8”, “type”: “tab”, “label”: “Flow 1”, “disabled”: false, “info”: “” }, { “id”: “8f70d77.d5e5a28”, “type”: “ui_toast”, “z”: “f6f2187d.f17ca8”, “position”: “top right”, “displayTime”: “3”, “highlight”: “”, “sendall”: true, “outputs”: 0, “ok”: “OK”, “cancel”: “”, “raw”: false, “topic”: “”, “name”: “”, “x”: 380, “y”: 1020, “wires”: [] }, { “id”: “10c76dea.46e882”, “type”: “ui_template”, “z”: “f6f2187d.f17ca8”, “name”: “”, “order”: 0, “width”: 0, “height”: 0, “format”: “<div ng-bind-html=\”msg.payload\”></div>”, “storeOutMessages”: true, “fwdInMessages”: true, “resendOnRefresh”: true, “templateScope”: “local”, “x”: 710, “y”: 1080, “wires”: [ [] ] }, { “id”: “1962ed44.5d0a13”, “type”: “inject”, “z”: “f6f2187d.f17ca8”, “name”: “”, “props”: [ { “p”: “payload” }, { “p”: “topic”, “vt”: “str” } ], “repeat”: “1”, “crontab”: “”, “once”: false, “onceDelay”: 0.1, “topic”: “”, “payload”: “1”, “payloadType”: “num”, “x”: 250, “y”: 480, “wires”: [ [ “51be0023.18998” ] ] }, { “id”: “51be0023.18998”, “type”: “function”, “z”: “f6f2187d.f17ca8”, “name”: “生成80-100随机数”, “func”: “msg.payload = Math.floor( Math.random()*20)+80\n\nreturn msg;”, “outputs”: 1, “noerr”: 0, “initialize”: “”, “finalize”: “”, “x”: 480, “y”: 480, “wires”: [ [ “91bc92f5.d25f3” ] ] }, { “id”: “91bc92f5.d25f3”, “type”: “ui_chart”, “z”: “f6f2187d.f17ca8”, “name”: “CPU使用率”, “group”: “baf29ced.1c3cc”, “order”: 0, “width”: 0, “height”: 0, “label”: “CPU使用率”, “chartType”: “line”, “legend”: “true”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “”, “dot”: false, “ymin”: “0”, “ymax”: “100”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: 0, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 790, “y”: 480, “wires”: [ [] ] }, { “id”: “baf29ced.1c3cc”, “type”: “ui_group”, “name”: “Fizz_Group”, “tab”: “7123a3ae.91856c”, “order”: 1, “disp”: true, “width”: “12”, “collapse”: false }, { “id”: “7123a3ae.91856c”, “type”: “ui_tab”, “name”: “Fizz_Tab”, “icon”: “dashboard”, “disabled”: false, “hidden”: false } ]

最终的效果图