所有文档

          物可视 IOTVIZ

          数据处理实践

          数据处理类型

          物可视数据处理分为两类,预设数据处理和自定义数据处理。

          • 预设数据处理:包括行列排序、重命名、行列转换、数据透视表等预设变换能力(用过Excel的小伙伴都知道)

          • 自定义数据处理:通过JS语法窗实现各种强大功能。

          预设变换实践

          行列转换功能及饼图制作

          1.准备数据源

          • 进入“数据表”页面
          • 选择设备影子类型的数据表,命名任意(这里叫“饼图制作”),进入下一步
          • 勾选所有物影子状态,确定

          2.数据表变形

          • 进入“数据表”页面
          • 选中上一步创建的数据表(“饼图制作”),点击顶部的图标按钮切换至“暂停”状态
          • 点击新创建的节点右边的“+”号按钮,添加“列排序”,将timestamp列隐藏
          • 点击新创建的节点右边的“+”号按钮,添加“行转列”

          3.添加可视化

          • 返回“仪表盘”页面
          • 从左边栏找到“图表”>“饼图”>“饼图”,拖放至画布上

          4.绑定数据

          • 选中拖上来的“饼图”组件,在右边栏切换至“数据设置”标签,在“数据表”下拉框中选取之前创建的数据表(当前位置)
          • 类目选“device”、度量选“vizuetest”

          动图操作示范

          展现效果

          数据透视表与玫瑰图

          1.准备数据源

          • 进入“数据表”页面
          • 选择静态数据类型的CSV,命名任意(这里叫“玫瑰图”),进入下一步
          • 贴入示例数据,点击确定

          2.数据表变形

          • 进入“数据表”页面
          • 选中上一步创建的数据表(“玫瑰图”),点击顶部的图标按钮切换至“暂停”状态
          • 点击新创建的节点右边的“+”号按钮,添加“透视表”,
          • 选择“door”作为“Dimension/表头”,选择“Stop”作为“Dimension/首列”, 选择“get_off_cnt”作为“Measure/数据列”
          • 聚合方式选择求和,点击确定
          • 点击新创建的节点右边的“+”号按钮,添加“重命名”,对Door的数据“1”“2”进行重命名,点击确定

          3.添加可视化

          • 返回“仪表盘”页面
          • 在搜索框搜索“南丁格尔”,找到玫瑰图,拖放至画布上

          4.绑定数据

          • 选中拖上来的“南丁格尔”组件,在右边栏切换至“数据设置”标签,在“数据表”下拉框中选取之前创建的数据表(当前位置)
          • 类目选“Stop”、度量选“前门”“后门”

          动图操作示范

          展现效果

          JS自定义实践

          转2进制及补零

          • 原始数据

            c1 149 61 148 141 49

          • 转2进制

            return cell.toString(2);

          • 补零

            var bin = cell.toString(2); for (var i = bin.length;i<12;i++){ bin = '0' + bin; } return bin;

          显示效果

          行列运算及聚合

          • 原始数据

            c1,c2 1,3 3,0 0,-1 5,6 -2,8 5,7 0,4 3,0 12,2

          • 多列相减

          return cell - rows[rowIndex][1];

          显示效果

          • 多列相加

          return cell + rows[rowIndex][1];

          显示效果

          • 列聚合求和

            function transform(cell, rowIndex, col, rows, header) { var rows_sofar = col.slice(0, rowIndex+1); var sum = 0; for (var i = 0; i< rows_sofar.length; i++) { sum = sum + rows_sofar[i]; } return sum; }

          显示效果

          用统计类图表展示TSDB时间序列数据

          背景:某项指标定时上报存储在TSDB里,希望在柱状图中显示每个月的汇总。

          1.数据准备

          • 配置TSDB类型的数据表,添加『Sum 1月』聚合函数
          • 表操作中基于timestamp列增加一个string类型的列(月份),变形脚本如下
          var date = new Date(cell);
          var month = date.getMonth();
          var month_names = "一 二 三 四 五 六 七 八 九 十 十一 十二".split(" ");
          
          return month_names[month] + '月';

          2.绑定图表

          在仪表盘中添加一个『统计柱状图』,数据绑定时X轴选『月份』,Y轴选对应的数据列即可。效果如下:

          上一篇
          嵌入可视交互实践
          下一篇
          使用PlayerAPI更新数据