UIVividLine

来自于：官方立即使用

open reloadData appendData close hide show

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UIVividLine模块封装了一个折线图视图，开发者可自定义其样式，可刷新数据，左右拖动查看不同的数据，并且能响应用户点击结点的事件。支持设置每个节点的示意图标，单击节点弹出气泡提示框。如下图：

UIVividLine - 图1

注意：open 时，若传入的 datas 内元素个数少于当前屏幕所能显示的最大个数时，不可左右拖动模块

open

打开折线图视图

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 默认值： 见内部字段
  • 内部字段：
  1. {
  2.     x: 0,                              //（可选项）数字类型；模块左上角的 X 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,                              //（可选项）数字类型；模块左上角的 Y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320,                            //（可选项）数字类型；模块的宽度，支持auto；默认：所属的 Window 或 Frame 的宽度
  5.     h: 300                             //（可选项）数字类型；模块的高度，支持auto；默认：w-20
  6. }

styles:

  • 类型：JSON 对象
  • 描述：（可选项）折线图样式配置
  • 默认值：见内部字段
  • 内部字段：
  1. {
  2.     bg: 'rgba(0,0,0,0)',            //（可选项）字符串类型；模块背景配置，支持grb、rgba、#、img；默认：rgba(0,0,0,0)
  3.     xAxisGap: w/6.5,                //（可选项）X 轴标记间隔距离；默认：w/6
  4.     yAxis: {                        //（可选项）JSON 对象；K 线图坐标系 y 轴配置参数
  5.        max: 5,                      //（可选项）数字类型；Y 轴最大值；默认：5
  6.        min: 1,                      //（可选项）数字类型；Y 轴最小值（大于零）；默认：1
  7.        step: 1,                     //（可选项）数字类型；Y 轴步幅；默认最小值：1
  8.        suffix: '级',                //（可选项）字符串类型；Y 轴标注后缀；默认:空字符串
  9.        width: w/6.5,                //（可选项）数字类型；Y 轴的标注所占的宽度；默认： w/6.5
  10.        color: '#696969',            //（可选项）字符串类型；Y 轴标注字体颜色，支持rgb、rgba、#；默认：#696969
  11.        size: 12                     //（可选项）数字类型；Y 轴标注字体大小；默认：12
  12.     },
  13.     xAxis: {                        //（可选项）JSON 对象；X 轴的样式配置
  14.        color: '#fff',               //（可选项）字符串类型；X 轴标注字体颜色，支持rgb、rgba、#；默认：#fff
  15.        size: 12,                    //（可选项）数字类型；X 轴标注字体大小；默认：12
  16.        height: h/6.0,               //（可选项）数字类型；X 轴所占高度；默认：h/6.0
  17.        bubble: {                    //（可选项）JSON对象；点击结点时，在对应 X 轴上弹出的提示框样式配置
  18.           w: w/(6.5*2.0),           //（可选项）数字类型；提示框的宽；默认：w/(6.5*2.0)
  19.           h: h/9.0,                 //（可选项）数字类型；提示框的高；默认：h/9.0
  20.           bg: 'fs://vidBubble.png', //（可选项）字符串类型；提示框的背景图片设置，要求本地路径（fs://、widget://）;若不传则不显示提示框背景
  21.           size: 14,                 //（可选项）数字类型；提示框内的字体大小；默认：14
  22.           color: '#fff'             //（可选项）字符串类型；提示框内的字体颜色；默认：#fff 
  23.        }
  24.     },
  25.     coordinate: {                   //（可选项）JSON对象；坐标线的样式配置
  26.        horizontal: {                //（可选项）JSON对象；横坐标线样式配置
  27.           color: '#696969',         //（可选项）字符串类型；横坐标线颜色，支持 rgb、rgba、#；默认：#696969
  28.           width: 0.5,               //（可选项）数字类型；横坐标线粗细；默认：0.5
  29.           style: 'solid'            //（可选项）字符串类型；横坐标线类型，取值范围：dash（虚线）、solid（实线）；默认：solid
  30.         },
  31.        vertical: {                  //（可选项）JSON对象；竖坐标线样式配置
  32.           color:'rgba(0,0,0,0)',    //（可选项）字符串类型；竖坐标线颜色，支持 rgb、rgba、#；默认：rgba(0,0,0,0)
  33.           width: 0.5,               //（可选项）数字类型；竖坐标线粗细；默认：0.5
  34.           style: 'solid'            //（可选项）字符串类型；竖坐标线类型，取值范围：dash（虚线）、solid（实线）；默认：solid
  35.         }
  36.     },
  37.     line: {                         //（可选项）JSON 对象；折线的样式配置
  38.        color: '#fff',               //（可选项）字符串类型；折线颜色设置，支持 rgb、rgba、#；默认：#fff
  39.        width: 1                     //（可选项）数字类型；折线粗细；默认：1.0
  40.     },
  41.     node: {                         //（可选项）JSON 对象；结点的样式配置
  42.        size: 3,                     //（可选项）数字类型；结点大小；默认：3.0
  43.        color: '#fff',               //（可选项）数字类型；结点颜色设置，支持 rgb、rgba、#；默认：#fff
  44.        hollow: false                //（可选项）布尔类型；是否为空心圆；默认：false
  45.     },
  46.     icon: {                         //（可选项）JSON对象；结点上示意图标的大小配置
  47.        width: 60,                   //（可选项）数字类型；结点上示意图标的宽；默认：60
  48.        height: 60                   //（可选项）数字类型；结点上示意图标的高；默认：60
  49.     }
  50. }

datas：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：
  1. [{    
  2.     mark: '',   //字符串类型；X 轴标注
  3.     value: ,    //数字类型；标注对应的值，取值范围在 min 和 max 之间
  4.     icon: ''    //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
  5. }]

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：是否将模块视图固定到窗口上，不跟随窗口上下滚动，可为空

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      id: 1,                   //数字类型；打开的折线图视图的 id
  3.      eventType: 'nodeClick',  //字符串类型；交互事件类型，取值范围如下：
  4.                               //show：模块打开并显示在页面上
  5.                               //nodeClick：用户点击结点事件
  6.                               //scrollLeft：向左滑动到头后再滑动一定阈值（40）后触发该事件
  7.                               //scrollRight：向右滑动到头后再滑动一定阈值（40）后触发该事件
  8.      index:3                  //数字类型；点击结点的下标，仅当 eventType 为 nodeClick 时有值
  9. }

示例代码

  1. var obj = api.require('UIVividLine');
  2. obj.open({
  3.     rect: {
  4.         x: 10,
  5.         y: 10,
  6.         w: 300,
  7.         h: 150
  8.     },
  9.     styles: {
  10.         bg: 'widget://res/UIVividLine/bg.png',
  11.         xAxisGap: 46.1,
  12.         yAxis: {
  13.             max: 5,
  14.             min: 1,
  15.             step: 1,
  16.             suffix: '级',
  17.             width: 46.1,
  18.             color: '#696969',
  19.             size: 12
  20.         },
  21.         xAxis: {
  22.             color: '#fff',
  23.             size: 12,
  24.             height: 25,
  25.             bubble: {
  26.                 w: 23,
  27.                 h: 17,
  28.                 bg: 'widget://res/UIVividLine/bubble.png',
  29.                 size: 14,
  30.                 color: '#fff'
  31.             }
  32.         },
  33.         coordinate: {
  34.             horizontal: {
  35.                 color: '#696969',
  36.                 width: 0.5,
  37.                 style: 'solid'
  38.             },
  39.             vertical: {
  40.                 color: '#696969',
  41.                 width: 0.5,
  42.                 style: 'solid'
  43.             }
  44.         },
  45.         line: {
  46.             color: '#fff',
  47.             width: 1
  48.         },
  49.         node: {
  50.             size: 3,
  51.             color: '#fff',
  52.             hollow: false
  53.         },
  54.         icon: {
  55.             width: 30,
  56.             height: 30
  57.         }
  58.     },
  59.     fixedOn: api.frameName,
  60.     fixed: true,
  61.     datas: [{
  62.         mark: '15:00',
  63.         value: 3,
  64.         icon: 'widget://res/UIVividLine/icon1.png'
  65.     }, {
  66.         mark: '16:00',
  67.         value: 2,
  68.         icon: 'widget://res/UIVividLine/icon2.png'
  69.     }, {
  70.         mark: '17:00',
  71.         value: 4,
  72.         icon: 'widget://res/UIVividLine/icon3.png'
  73.     }, {
  74.         mark: '18:00',
  75.         value: 2,
  76.         icon: 'widget://res/UIVividLine/icon4.png'
  77.     }, {
  78.         mark: '19:00',
  79.         value: 3,
  80.         icon: 'widget://res/UIVividLine/icon5.png'
  81.     }, {
  82.         mark: '20:00',
  83.         value: 2,
  84.         icon: 'widget://res/UIVividLine/icon6.png'
  85.     }]
  86. }, function(ret) {
  87.     api.alert({
  88.         msg: JSON.stringify(ret)
  89.     });
  90. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新折线数据

reloadData({params})

params

id：

  • 类型：数字
  • 描述：操作视图的 id

datas：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：
  1. [{    
  2.     mark: '',   //字符串类型；X 轴标注
  3.     value: ,    //数字类型；标注对应的值，取值范围在 min 和 max 之间
  4.     icon: ''    //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
  5. }]

示例代码

  1. var UIVividLine = api.require('UIVividLine');
  2. UIVividLine.reloadData({
  3.     id: 1,
  4.     datas: [{
  5.         mark: '15:00',
  6.         value: 1,
  7.         icon: 'widget://res/UIVividLine/icon1.png'
  8.     }, {
  9.         mark: '16:00',
  10.         value: 2,
  11.         icon: 'widget://res/UIVividLine/icon2.png'
  12.     }, {
  13.         mark: '17:00',
  14.         value: 2,
  15.         icon: 'widget://res/UIVividLine/icon3.png'
  16.     }, {
  17.         mark: '18:00',
  18.         value: 2,
  19.         icon: 'widget://res/UIVividLine/icon4.png'
  20.     }, {
  21.         mark: '19:00',
  22.         value: 2,
  23.         icon: 'widget://res/UIVividLine/icon5.png'
  24.     }, {
  25.         mark: '20:00',
  26.         value: 4,
  27.         icon: 'widget://res/UIVividLine/icon6.png'
  28.     }]
  29. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

appendData

往现有数据拼接新数据

appendData({params})

params

id：

  • 类型：数字
  • 描述：操作视图的 id

datas：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：
  1. [{    
  2.     mark: '',   //字符串类型；X 轴标注
  3.     value: ,    //数字类型；标注对应的值，取值范围在 min 和 max 之间
  4.     icon: ''    //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
  5. }]

orientation：

  • 类型：字符串
  • 描述：（可选项）拼接数据的方向，取值范围：right，left
  • 默认值：right

示例代码

  1. var UIVividLine = api.require('UIVividLine');
  2. UIVividLine.appendData({
  3.     id: 1,
  4.     orientation: 'right',
  5.     datas: [{
  6.         mark: '21:00',
  7.         value: 1,
  8.         icon: 'widget://res/UIVividLine/icon1.png'
  9.     }, {
  10.         mark: '22:00',
  11.         value: 2,
  12.         icon: 'widget://res/UIVividLine/icon2.png'
  13.     }, {
  14.         mark: '23:00',
  15.         value: 2,
  16.         icon: 'widget://res/UIVividLine/icon3.png'
  17.     }, {
  18.         mark: '24:00',
  19.         value: 2,
  20.         icon: 'widget://res/UIVividLine/icon4.png'
  21.     }, {
  22.         mark: '00:00',
  23.         value: 2,
  24.         icon: 'widget://res/UIVividLine/icon5.png'
  25.     }, {
  26.         mark: '01:00',
  27.         value: 4,
  28.         icon: 'widget://res/UIVividLine/icon6.png'
  29.     }]
  30. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭折线图视图，并从内存里清空

close({params})

params

id：

  • 类型：数字
  • 描述：操作视图的 id

示例代码

  1. var UIVividLine = api.require('UIVividLine');
  2. UIVividLine.close({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏折线图视图，并没有从内存里清空

hide ({params})

params

id：

  • 类型：数字
  • 描述：操作视图的 id

示例代码

  1. var UIVividLine = api.require('UIVividLine');
  2. UIVividLine.hide({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的折线图视图

show ({params})

params

id：

  • 类型：数字
  • 描述：操作视图的 id

示例代码

  1. var UIVividLine = api.require('UIVividLine');
  2. UIVividLine.show({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。