即使不会node.js,拖拽就可完成数据的可视化展示
摘要: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,拖拽就可完成数据的可视化展示相关推荐
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
- php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
- 解决JS拖拽出现的问题
解决JS拖拽出现的问题 参考文章: (1)解决JS拖拽出现的问题 (2)https://www.cnblogs.com/yuanjingjing/p/10154198.html 备忘一下.
- vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
- js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...
- 使用js拖拽盒子移动()
使用js拖拽盒子移动 所用到的方法有onmousemove , onmouseup , onmousedown 按下鼠标开始拖拽,松下及停止 此方法用函数实现 <!DOCTYPE html> ...
- js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码 原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址 下载地址
最新文章
- 转载 用python 获取当前时间
- 矩阵的特征值、特征向量及其代码求解实现
- 【数据分析实例】6000 条倒闭企业数据分析
- python numpy库等差不均分_numpy.linspace 生成等差数组的方法
- pdfminer3k 官方文档_IPFS官方周报112期
- Leet Code OJ 171. Excel Sheet Column Number [Difficulty: Easy]
- Qt与FFmpeg联合开发指南(二)——解码(2):封装和界面设计
- python绘制饼图双层_有趣!如何用Python-matplotlib绘制双层饼图及环形图?
- wordpress php执行短代码_PHP 8.0发布日期和PHP中JIT的状态
- python安装与使用Ta-Lib,获取金融技术面特征
- 【Flink】Discard registration from TaskExecutor SplitFetcher received unexpected exception
- vCenter Server Appliance 所需的端口
- 6.2神经网络算法应用上学习笔记
- 为什么要分层?数据仓库分层架构深度讲解
- 介绍几款可以在手机上用来学习编程的软件
- Asp.net mvc5开源项目超级冷笑话
- 《信息安全系统设计基础》课程总结 20155335 俞昆
- 免费的ftp服务器 linux,免费ftp服务器,3款免费ftp服务器推荐
- igraph 利用节点列表输出子图并存储
- 解决Adobe Acobat设置了背景色,显示出现白条的问题!
热门文章
- es6 Object.is()方法
- Eigen 矩阵计算工具
- 视觉SLAM笔记(39) 求解 ICP
- python classmethod函数_在python中使用与instance和classmethod相同的函数
- win 二进制门安装mysql_MySQL5.7 windows二进制安装
- Ubuntu下deb与rpm包的安装方法
- 二分查找算法实现(图解)与实例
- 【异常】INFO: TopologyManager: EndpointListener changed ...
- SQL SERVER 只有MDF文件的恢复
- C#中(int),int.Parse,int.TryParse,Convert.ToInt32四则之间的用法