Node-RED教程(十一):Node-RED面板chart节点的使用案例

Node-RED 专栏收录该内容
20 篇文章 54 订阅

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

上一期我给大家简单介绍了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
    }
]

最终的效果图

  • 12
    点赞
  • 2
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <span style="color:#313d54;font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;font-size:16px;background-color:#ffffff;">Node-RED是工业网物联网重要组成部分,我最开始接触Node-RED,也算是一个偶然机会吧,上班后领导安排我第一个任务就是调研一下Node-RED,我之后上网查了一下,那个时候网上相对于Node-RED资料也比较少,只知道它是IBM公司一个开源项目。直到最近,发现许多大公司产品都支持Node-RED,比如西门子公司IoT2000,研华公司WISE PaaS 网关,美国OPTO 22等设备中都安装了Node-RED,表明它在工业物联网和控制中已经广泛应用了。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010200935441926.png" alt="" width="1316" height="524" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 那么工业物联网为什么要用它?它又处于工业物联网那个层次?它具有哪些特性?它帮助物联网解决了什么问题?为什么说它是柔性动态可重构解决方案呢? </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 本门课程,老师将带领你从Node-RED发展,工业物联网定位开始讲解,并带领着大家进行手把手安装Node-RED,实际操作演练Node-RED,并搭建一个物联网小平台,给大家带来更好学习效果。 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936289051.png" alt="" width="1841" height="948" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936561564.png" alt="" width="1920" height="977" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 为了能够让小伙伴们快速了解本门课程结构,本门课程从以下几个方面展开 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED入门 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED安装与配置 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED教学实战 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED优势与不足 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED能为我们带来什么 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED总结与展望 </p>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值