当前位置:网站首页>(超详细二)onenet数据可视化详解,如何用截取数据流绘图
(超详细二)onenet数据可视化详解,如何用截取数据流绘图
2022-07-06 09:19:00 【麓南的风】
目录
前言
上一篇我们采用传感器接入了onenet平台,实时上传采集的数据。当我们打开设备,打开数据流看着一排排在刷新的数据,有没有什么方法更直观一些呢?比如截取数据流进行可视化处理,用数据点绘制曲线,或者用仪表的方式感受采集数据的变化?
硬件搭建
https://blog.csdn.net/qq_45998204/article/details/124686714
详见上一章
onenet平台准备
新建一个面板
自行添加所需格式的常规图表
数据流导入
打开数据,管理数据源
这样我们再打开数据源选择时,就能找到我们上传的数据流了
如何对仪表盘进行控制,打开私有过滤器,进行修改,看看值的变化
data-----选择的数据流值
rootdata----该设备下的所有数据流值
OneNET View提供了过滤器来对数据源进行个性化处理,用户可以自行写入JavaScript代码,实现数据结构转换、筛选和一些简单的计算
输入data,我们可以观察到,仪表板随着返回的数据流值发生了改变
打开数据处理结果,可以直观的观察到数据流返回信息,前边我们设置了刷新间隔5秒,数据点数100,在这么多数据处理结果里面,我们需要截取最新一组数据应用仪表盘显示
接下来就是如何截取我们所需的数据值来绘图
打开私有过滤器,进行修改,让它返回最后一组数据
调用函数 last(arr)
将last(data)赋给value
打开数据处理结果,最新一组数据显示一致
仪表盘程序段(获取上传最后一组数据)
// last([1, 2]); // -> 2
function last(arr) {
var len = arr ? arr.length : 0;
if (len) return arr[len - 1];
}
return [{
value: last(data).value,
name: '温度'
}]
修改程序后一定要保存
观察单个数据无法很好表达整体情况
于是引入曲线图
选中定义的曲线图,添加数据源后,修改私有过滤器,返回数据流data(保存!)
再打开数据处理结果,这里很多组数据,我们需要选取有用数据来帮助绘图,比如上传时间,上传的采样值(温度)
通常数据源返回的结果大多是数组类型,通过迭代可以对每个元素进行处理。
打开私有过滤器
曲线代码段
data.forEach((item, index) => {
// console.log('元素:', item, ';下标:', index);
item.x = item.update_at
item.y = item.value
});
return data
多设备多数据流上传情况同理
链接
(个人可视化图后来重做了一遍用于项目了,暂时关闭访问)
注意
看了评论发现有的人没有出图,流程没有问题,有个小细节注意一下
导入常规图表时这里是有三个系列,复制程序后发现只有x轴更新,是因为这里的y轴字段名是y1,而程序赋值的是y,修改此处就好了
有空再更一下rootdata的使用
欢迎交流
边栏推荐
- 162. Find peak - binary search
- 错误: 找不到符号
- Common method signatures and meanings of Iterable, collection and list
- RTKLIB: demo5 b34f. 1 vs b33
- 一文搞定 UDP 和 TCP 高频面试题!
- TYUT太原理工大学2022数据库大题之概念模型设计
- Edit distance (multi-source BFS)
- View UI Plus 发布 1.1.0 版本,支持 SSR、支持 Nuxt、增加 TS 声明文件
- Tyut Taiyuan University of technology 2022 introduction to software engineering examination question outline
- [GNSS] robust estimation (robust estimation) principle and program implementation
猜你喜欢
Code example of MATLAB reading GNSS observation value o file
Decomposition relation model of the 2022 database of tyut Taiyuan University of Technology
Data manipulation language (DML)
阿里云微服务(二) 分布式服务配置中心以及Nacos的使用场景及实现介绍
System design learning (III) design Amazon's sales rank by category feature
On March 15, the official version of go 1.18 was released to learn about the latest features and usage
Design a key value cache to save the results of the most recent Web server queries
Relational algebra of tyut Taiyuan University of technology 2022 database
Iterable、Collection、List 的常见方法签名以及含义
Answer to "software testing" exercise: Chapter 1
随机推荐
【话题终结者】
Several high-frequency JVM interview questions
First acquaintance with C language (Part 2)
几道高频的JVM面试题
A brief introduction to the database of tyut Taiyuan University of technology in previous years
[algorithm] sword finger offer2 golang interview question 5: maximum product of word length
How to ensure data consistency between MySQL and redis?
Wechat applet development experience
[algorithm] sword finger offer2 golang interview question 10: subarray with sum K
Inheritance and polymorphism (I)
IPv6 experiment
Tyut Taiyuan University of technology 2022 introduction to software engineering summary
Application architecture of large live broadcast platform
Introduction and use of redis
Rt-ppp test using rtknavi
E-R graph to relational model of the 2022 database of tyut Taiyuan University of Technology
Summary of multiple choice questions in the 2022 database of tyut Taiyuan University of Technology
分支语句和循环语句
ROS machine voice
一文搞定 UDP 和 TCP 高频面试题!