UIVividLine
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
UIVividLine插件封装了一个折线图视图，开发者可自定义其样式，可刷新数据，左右拖动查看不同的数据，并且能响应用户点击结点的事件。支持设置每个节点的示意图标，单击节点弹出气泡提示框。如下图：
注意：open 时，若传入的 datas 内元素个数少于当前屏幕所能显示的最大个数时，不可左右拖动插件
open
打开折线图视图
open({params}, callback(ret))
params
rect：
- 类型：JSON 对象
- 描述：（可选项）插件的位置及尺寸
- 默认值： 见内部字段
- 内部字段：
{
x: 0, //（可选项）数字类型；插件左上角的 X 坐标（相对于所属的 Window 或 Frame）；默认：0
y: 0, //（可选项）数字类型；插件左上角的 Y 坐标（相对于所属的 Window 或 Frame）；默认：0
w: 320, //（可选项）数字类型；插件的宽度，支持auto；默认：所属的 Window 或 Frame 的宽度
h: 300 //（可选项）数字类型；插件的高度，支持auto；默认：w-20
}
styles:
- 类型：JSON 对象
- 描述：（可选项）折线图样式配置
- 默认值：见内部字段
- 内部字段：
{
bg: 'rgba(0,0,0,0)', //（可选项）字符串类型；插件背景配置，支持grb、rgba、#、img；默认：rgba(0,0,0,0)
xAxisGap: w/6.5, //（可选项）X 轴标记间隔距离；默认：w/6
yAxis: { //（可选项）JSON 对象；K 线图坐标系 y 轴配置参数
max: 5, //（可选项）数字类型；Y 轴最大值；默认：5
min: 1, //（可选项）数字类型；Y 轴最小值（大于零）；默认：1
step: 1, //（可选项）数字类型；Y 轴步幅；默认最小值：1
suffix: '级', //（可选项）字符串类型；Y 轴标注后缀；默认:空字符串
width: w/6.5, //（可选项）数字类型；Y 轴的标注所占的宽度；默认： w/6.5
color: '#696969', //（可选项）字符串类型；Y 轴标注字体颜色，支持rgb、rgba、#；默认：#696969
size: 12 //（可选项）数字类型；Y 轴标注字体大小；默认：12
},
xAxis: { //（可选项）JSON 对象；X 轴的样式配置
color: '#fff', //（可选项）字符串类型；X 轴标注字体颜色，支持rgb、rgba、#；默认：#fff
size: 12, //（可选项）数字类型；X 轴标注字体大小；默认：12
height: h/6.0, //（可选项）数字类型；X 轴所占高度；默认：h/6.0
bubble: { //（可选项）JSON对象；点击结点时，在对应 X 轴上弹出的提示框样式配置
w: w/(6.5*2.0), //（可选项）数字类型；提示框的宽；默认：w/(6.5*2.0)
h: h/9.0, //（可选项）数字类型；提示框的高；默认：h/9.0
bg: 'fs://vidBubble.png', //（可选项）字符串类型；提示框的背景图片设置，要求本地路径（fs://、widget://）;若不传则不显示提示框背景
size: 14, //（可选项）数字类型；提示框内的字体大小；默认：14
color: '#fff' //（可选项）字符串类型；提示框内的字体颜色；默认：#fff
}
},
coordinate: { //（可选项）JSON对象；坐标线的样式配置
horizontal: { //（可选项）JSON对象；横坐标线样式配置
color: '#696969', //（可选项）字符串类型；横坐标线颜色，支持 rgb、rgba、#；默认：#696969
width: 0.5, //（可选项）数字类型；横坐标线粗细；默认：0.5
style: 'solid' //（可选项）字符串类型；横坐标线类型，取值范围：dash（虚线）、solid（实线）；默认：solid
},
vertical: { //（可选项）JSON对象；竖坐标线样式配置
color:'rgba(0,0,0,0)', //（可选项）字符串类型；竖坐标线颜色，支持 rgb、rgba、#；默认：rgba(0,0,0,0)
width: 0.5, //（可选项）数字类型；竖坐标线粗细；默认：0.5
style: 'solid' //（可选项）字符串类型；竖坐标线类型，取值范围：dash（虚线）、solid（实线）；默认：solid
}
},
line: { //（可选项）JSON 对象；折线的样式配置
color: '#fff', //（可选项）字符串类型；折线颜色设置，支持 rgb、rgba、#；默认：#fff
width: 1 //（可选项）数字类型；折线粗细；默认：1.0
},
node: { //（可选项）JSON 对象；结点的样式配置
size: 3, //（可选项）数字类型；结点大小；默认：3.0
color: '#fff', //（可选项）数字类型；结点颜色设置，支持 rgb、rgba、#；默认：#fff
hollow: false //（可选项）布尔类型；是否为空心圆；默认：false
},
icon: { //（可选项）JSON对象；结点上示意图标的大小配置
width: 60, //（可选项）数字类型；结点上示意图标的宽；默认：60
height: 60 //（可选项）数字类型；结点上示意图标的高；默认：60
}
}
datas：
- 类型：数组对象
- 描述：折线的数据信息
- 内部字段：
[{
mark: '', //字符串类型；X 轴标注
value: , //数字类型；标注对应的值，取值范围在 min 和 max 之间
icon: '' //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
}]
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed:
- 类型：布尔
- 默认值：true
- 描述：是否将插件视图固定到窗口上，不跟随窗口上下滚动，可为空
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
id: 1, //数字类型；打开的折线图视图的 id
eventType: 'nodeClick', //字符串类型；交互事件类型，取值范围如下：
//show：插件打开并显示在页面上
//nodeClick：用户点击结点事件
//scrollLeft：向左滑动到头后再滑动一定阈值（40）后触发该事件
//scrollRight：向右滑动到头后再滑动一定阈值（40）后触发该事件
index:3 //数字类型；点击结点的下标，仅当 eventType 为 nodeClick 时有值
}
示例代码
var obj = api.require('UIVividLine');
obj.open({
rect: {
x: 10,
y: 10,
w: 300,
h: 150
},
styles: {
bg: 'widget://res/UIVividLine/bg.png',
xAxisGap: 46.1,
yAxis: {
max: 5,
min: 1,
step: 1,
suffix: '级',
width: 46.1,
color: '#696969',
size: 12
},
xAxis: {
color: '#fff',
size: 12,
height: 25,
bubble: {
w: 23,
h: 17,
bg: 'widget://res/UIVividLine/bubble.png',
size: 14,
color: '#fff'
}
},
coordinate: {
horizontal: {
color: '#696969',
width: 0.5,
style: 'solid'
},
vertical: {
color: '#696969',
width: 0.5,
style: 'solid'
}
},
line: {
color: '#fff',
width: 1
},
node: {
size: 3,
color: '#fff',
hollow: false
},
icon: {
width: 30,
height: 30
}
},
fixedOn: api.frameName,
fixed: true,
datas: [{
mark: '15:00',
value: 3,
icon: 'widget://res/UIVividLine/icon1.png'
}, {
mark: '16:00',
value: 2,
icon: 'widget://res/UIVividLine/icon2.png'
}, {
mark: '17:00',
value: 4,
icon: 'widget://res/UIVividLine/icon3.png'
}, {
mark: '18:00',
value: 2,
icon: 'widget://res/UIVividLine/icon4.png'
}, {
mark: '19:00',
value: 3,
icon: 'widget://res/UIVividLine/icon5.png'
}, {
mark: '20:00',
value: 2,
icon: 'widget://res/UIVividLine/icon6.png'
}]
}, function(ret) {
api.alert({
msg: JSON.stringify(ret)
});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
reloadData
刷新折线数据
reloadData({params})
params
id：
- 类型：数字
- 描述：操作视图的 id
datas：
- 类型：数组对象
- 描述：折线的数据信息
- 内部字段：
[{
mark: '', //字符串类型；X 轴标注
value: , //数字类型；标注对应的值，取值范围在 min 和 max 之间
icon: '' //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
}]
示例代码
var UIVividLine = api.require('UIVividLine');
UIVividLine.reloadData({
id: 1,
datas: [{
mark: '15:00',
value: 1,
icon: 'widget://res/UIVividLine/icon1.png'
}, {
mark: '16:00',
value: 2,
icon: 'widget://res/UIVividLine/icon2.png'
}, {
mark: '17:00',
value: 2,
icon: 'widget://res/UIVividLine/icon3.png'
}, {
mark: '18:00',
value: 2,
icon: 'widget://res/UIVividLine/icon4.png'
}, {
mark: '19:00',
value: 2,
icon: 'widget://res/UIVividLine/icon5.png'
}, {
mark: '20:00',
value: 4,
icon: 'widget://res/UIVividLine/icon6.png'
}]
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
appendData
往现有数据拼接新数据
appendData({params})
params
id：
- 类型：数字
- 描述：操作视图的 id
datas：
- 类型：数组对象
- 描述：折线的数据信息
- 内部字段：
[{
mark: '', //字符串类型；X 轴标注
value: , //数字类型；标注对应的值，取值范围在 min 和 max 之间
icon: '' //（可选项）字符串类型；结点提示图标的路径，要求本地路径（fs://、widget://）
}]
orientation：
- 类型：字符串
- 描述：（可选项）拼接数据的方向，取值范围：right，left
- 默认值：right
示例代码
var UIVividLine = api.require('UIVividLine');
UIVividLine.appendData({
id: 1,
orientation: 'right',
datas: [{
mark: '21:00',
value: 1,
icon: 'widget://res/UIVividLine/icon1.png'
}, {
mark: '22:00',
value: 2,
icon: 'widget://res/UIVividLine/icon2.png'
}, {
mark: '23:00',
value: 2,
icon: 'widget://res/UIVividLine/icon3.png'
}, {
mark: '24:00',
value: 2,
icon: 'widget://res/UIVividLine/icon4.png'
}, {
mark: '00:00',
value: 2,
icon: 'widget://res/UIVividLine/icon5.png'
}, {
mark: '01:00',
value: 4,
icon: 'widget://res/UIVividLine/icon6.png'
}]
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭折线图视图，并从内存里清空
close({params})
params
id：
- 类型：数字
- 描述：操作视图的 id
示例代码
var UIVividLine = api.require('UIVividLine');
UIVividLine.close({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏折线图视图，并没有从内存里清空
hide ({params})
params
id：
- 类型：数字
- 描述：操作视图的 id
示例代码
var UIVividLine = api.require('UIVividLine');
UIVividLine.hide({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示已隐藏的折线图视图
show ({params})
params
id：
- 类型：数字
- 描述：操作视图的 id
示例代码
var UIVividLine = api.require('UIVividLine');
UIVividLine.show({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。