摘要:node-red是一款基于Node.js的开源可视化界面开发工具,不需要掌握node.js而通过拖拽即可完成数据的可视化展示。

1.首先看一下node-red对数据的渲染效果

你可能认为,必须熟练掌握前端知识才能做出这样的页面,实际上它只需要一下几步拖拽操作即可

node-red本身就是为MQTT而诞生,因此很适合进行物联网数据展示,支持数据库操作、mqtt协议,同时用户也可以在它的基础上,使用html等进行前端界面修改。如果你想快速而完美的展示你的数据,不妨试一试NODE-RED。当然,你想安装它,也很简单的~~

2.安装

首先需要安装nodejs(百度上有很多示例,也挺简单的,就不讲解啦),然后 在控制台输入 npm install -g --unsafe-perm node-red 即可;

为了让node-red在后台保持运行,我们使用此命令:nohup node-red &

完整的安装步骤如下

  • 安装nodejs环境
sudo apt-get install nodejs
  • 安装node-red
sudo apt-get install npm
sudo npm install -g node-red
  • 普通运行
node-red
  • 后台持续运行
nohup node-red &

3.使用示例

展示一下我自己展示温湿度的页面

nede-red这款工具,好用而且简单,很适合初学者。给大家分享一下我的数据展示,附源码(页面交丑,仅供交流学习)其中包括连接mqtt服务器、数据插入mysql数据库

数据展示页面

在下面这个界面中,我进行了两个温度、两个湿度数据的展示;当订阅的主题接受到消息后,解析json数据格式,得到温湿度数据并展示在前端

布局:

注意,在此布局中,有使用到数据库。我使用的是mysql,只是简单的插入数据,仅供参考。

- 紫色的方块为订阅的MQTT消息,需要配置相应的参数

- 绿色为调试信息;

- 蓝色方块为布局的展示,不同部件,展示的效果不同

- 黄色方块为信息格式转化,主要是为了方便折线图的展示;

- 橙色方块为数据库操作,需要连接自己的数据库;

其实实现很简单,就是通过拖拉、然后设置相应的参数,基本上不要求编程能力。而且,只要有数据,就可以通过nodered去展示。

点击关注,第一时间了解华为云新鲜技术~

即使不会node.js,拖拽就可完成数据的可视化展示相关推荐

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用

    最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...

  3. php拖拽原理,JS拖拽效果及原理解析

    这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...

  4. html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析

    本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...

  5. 解决JS拖拽出现的问题

    解决JS拖拽出现的问题 参考文章: (1)解决JS拖拽出现的问题 (2)https://www.cnblogs.com/yuanjingjing/p/10154198.html 备忘一下.

  6. vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库

    vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...

  7. js拖拽图片到浏览器上传

    拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  8. 使用js拖拽盒子移动()

    使用js拖拽盒子移动 所用到的方法有onmousemove , onmouseup , onmousedown 按下鼠标开始拖拽,松下及停止 此方法用函数实现 <!DOCTYPE html> ...

  9. js拖拽360桌面悬浮球代码

    js拖拽360桌面悬浮球代码 原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址 下载地址

最新文章

  1. 转载 用python 获取当前时间
  2. 矩阵的特征值、特征向量及其代码求解实现
  3. 【数据分析实例】6000 条倒闭企业数据分析
  4. python numpy库等差不均分_numpy.linspace 生成等差数组的方法
  5. pdfminer3k 官方文档_IPFS官方周报112期
  6. Leet Code OJ 171. Excel Sheet Column Number [Difficulty: Easy]
  7. Qt与FFmpeg联合开发指南(二)——解码(2):封装和界面设计
  8. python绘制饼图双层_有趣!如何用Python-matplotlib绘制双层饼图及环形图?
  9. wordpress php执行短代码_PHP 8.0发布日期和PHP中JIT的状态
  10. python安装与使用Ta-Lib,获取金融技术面特征
  11. 【Flink】Discard registration from TaskExecutor SplitFetcher received unexpected exception
  12. vCenter Server Appliance 所需的端口
  13. 6.2神经网络算法应用上学习笔记
  14. 为什么要分层?数据仓库分层架构深度讲解
  15. 介绍几款可以在手机上用来学习编程的软件
  16. Asp.net mvc5开源项目超级冷笑话
  17. 《信息安全系统设计基础》课程总结 20155335 俞昆
  18. 免费的ftp服务器 linux,免费ftp服务器,3款免费ftp服务器推荐
  19. igraph 利用节点列表输出子图并存储
  20. 解决Adobe Acobat设置了背景色,显示出现白条的问题!

热门文章

  1. es6 Object.is()方法
  2. Eigen 矩阵计算工具
  3. 视觉SLAM笔记(39) 求解 ICP
  4. python classmethod函数_在python中使用与instance和classmethod相同的函数
  5. win 二进制门安装mysql_MySQL5.7 windows二进制安装
  6. Ubuntu下deb与rpm包的安装方法
  7. 二分查找算法实现(图解)与实例
  8. 【异常】INFO: TopologyManager: EndpointListener changed ...
  9. SQL SERVER 只有MDF文件的恢复
  10. C#中(int),int.Parse,int.TryParse,Convert.ToInt32四则之间的用法