物可视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更新数据