doubleBarChart
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
doubleBarChart 是一个柱状图插件，可自定义 X、Y 轴样式以及柱子的个数和颜色。本插件可监听左右拖动到头的事件，可向当前数据拼接加载、刷新等操作。同一个页面可以打开多个插件实例，以插件 id 区分。
open
打开柱状图视图
open({params}, callback(ret))
params
rect：
- 类型：JSON 对象
- 描述：（可选项）插件的位置及尺寸
- 内部字段：
{
x: 0, //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
y: 0, //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
w: 320, //（可选项）数字类型；插件的宽度；默认：auto
h: 200 //（可选项）数字类型；插件的高度；默认：w
}
yAxis：
- 类型：JSON 对象
- 描述：双柱状图的 Y 轴配置
- 内部字段：
{
max: 30, //数字类型；y 轴最大值；默认：30
min: 0, //数字类型；y 轴最小值；默认：0
step: 5, //数字类型；y 轴刻度间隔；默认：5
}
data：
- 类型：数组
- 描述：双柱状图关键结点的数据
- 内部字段：
[{
xAxis: '开始部分', //字符串类型；关键结点的x轴数据说明文字
yDataA: 13, //数字类型；关键结点在 y 轴的数据1
yDataB: 16, //数字类型；关键结点在 y 轴的数据2
id: 1, //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
title: '', //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
...
},{
xAxis: '准备部分', //字符串类型；关键结点的x轴数据
yDataA: 22, //数字类型；关键结点在 y 轴的数据1
yDataB: 24, //数字类型；关键结点在 y 轴的数据2
id: 2, //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
title: '', //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
...
}]
styles:
- 类型：
- 描述：（可选项）插件视图内元素样式配置
- 默认值：见内部字段
- 内部字段：
{
yAxis: { //（可选项）JSON 对象；Y轴样式
width:30, //（可选项）数字类型；Y轴宽度，默认：30
bg: '#2F4F4F', //（可选项）字符串类型；Y轴背景，支持 rgb、rgba、#；默认:'#2F4F4F'
markColor: '#fff',//（可选项）字符串类型；Y轴标注字体颜色，支持 rgb、rgba、#，默认:'#fff'
markSize: 12 //（可选项）数字类型；Y轴标注字体大小，默认：12
},
xAxis: { //（可选项）JSON 对象；X轴样式
height:30, //（可选项）数字类型；X轴高度，默认：30
bg: '#2F4F4F', //（可选项）字符串类型；X轴背景，支持 rgb、rgba、#；默认:'#2F4F4F'
markColor: '#fff',//（可选项）字符串类型；X轴标注字体颜色，支持 rgb、rgba、#，默认:'#fff'
markSize: 12 //（可选项）数字类型；X轴标注字体大小，默认：12
},
coordinate: { //（可选项）JSON 对象；坐标系样式
bg: '#2F4F4F', //（可选项）字符串类型；坐标系背景，支持 rgb、rgba、#；默认:'#2F4F4F'
horizontal:'#fff',//（可选项）字符串类型；坐标系中横线颜色，支持rgb、rgba、#；默认：#fff
borderSize: 0.5 //（可选项）数字类型；坐标系中分割线粗细；默认：0.5
},
bar: { //（可选项）JSON 对象；柱子样式配置
width:20, //（可选项）数字类型；柱子的宽度，默认：20
bgA: '#FFD700', //（可选项）字符串类型；柱子A的背景色，支持 rgb、rgba、#；默认:'#FFD700'
bgB: '#8DEEEE', //（可选项）字符串类型；柱子B的背景色，支持 rgb、rgba、#；默认:'#8DEEEE'
interval: 20 //（可选项）数字类型；每条数据柱子（两个柱子）间隔大小，默认：20
}
}
showData:
- 类型：布尔
- 描述：（可选项）是否显示每条柱子上的数据（数据样式通y轴标注字体样式）
- 默认值：true
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed:
- 类型：布尔
- 描述：（可选项）插件是否随所属 window 或 frame 滚动
- 默认值：true（不随之滚动）
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
id: 1, //数字类型；插件的 id，用于区分插件的多个实例
eventType: 'show', //字符串类型；交互事件类型
//取值范围：
//show（打开插件成功）
//click（点击柱状图的柱子的点击事件）
//reachLeftmost（拖动柱图至左边缘并超过一定阈值触发的事件）
//reachRightmost（拖动柱图至右边缘并超过一定阈值触发的事件）
index: //数字类型；点击柱状图柱子的索引，当 eventType 为 click 时有效
value: //数字类型；所点击柱子的值，当 eventType 为 click 时有效
selectedInfo: { //JSON 对象，返回所选柱子的数据详情，当 eventType 为 click 时有效
xAxis: '基本部分',
yDataA: 7,
yDataB: 9,
id: 1,
title: '',
...
}
}
示例代码
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.open({
rect: {
x: 30,
y: api.frameHeight / 2 - 170,
w: api.frameWidth - 60,
h: 340
},
yAxis: {
max: 30,
min: 0,
step: 5
},
data: [{
xAxis: '开始部分',
yDataA: 13,
yDataB: 16
}, {
xAxis: '准备部分',
yDataA: 22,
yDataB: 24
}, {
xAxis: '基本部分',
yDataA: 7,
yDataB: 9
}, {
xAxis: '开始部分',
yDataA: 14,
yDataB: 18
}],
styles: {
yAxis: {
width: 30,
bg: '#B2DFEE',
markColor: '#fff',
markSize: 12
},
xAxis: {
height: 30,
bg:'#2F4F4F'
markColor: '#fff',
markSize: 12
},
coordinate: {
bg: '#2F4F4F',
horizontal:'#fff',
borderSize: 0.5
},
bar: {
width:20,
bgA: '#FFD700',
bgB: '#8DEEEE',
interval: 20
}
},
fixedOn: api.frameName,
fixed: false
}, function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
reloadData
重新加载数据
reloadData({params}, callback(ret))
params
id：
- 类型：数字
- 描述：要刷新的插件的 id
type：
- 类型：字符串
- 描述：更新数据的方式
- 默认值：'updateAll'
- 取值范围：
- prepend（往数据源头部追加数据）
- append（往数据源尾部追加数据）
- updateAll（更新所有数据）
data：
- 类型：数组
- 描述：双柱状图关键结点的数据
- 内部字段：
[{
xAxis: '开始部分', //字符串类型；关键结点的x轴数据说明文字
yDataA: 13, //数字类型；关键结点在 y 轴的数据1
yDataB: 16, //数字类型；关键结点在 y 轴的数据2
id: 1, //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
title: '', //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
...
},{
xAxis: '准备部分', //字符串类型；关键结点的x轴数据
yDataA: 22, //数字类型；关键结点在 y 轴的数据1
yDataB: 24, //数字类型；关键结点在 y 轴的数据2
id: 2, //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
title: '', //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
...
}]
callback(ret, err)
ret：
类型：JSON 对象
内部字段：
```js { status: true, //布尔类型；数据源是否刷新成功， true|false count: 20 //数字类型；刷新数据后总数据量数（两个柱子为一条数据） }
## 示例代码
```js
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.reloadData({
id: 1,
type: '',
data: [{
xAxis: '开始部分',
yDataA: 13,
yDataB: 22
}, {
xAxis: '准备部分',
yDataA: 13,
yDataB: 24
}, {
xAxis: '基本部分',
yDataA: 7,
yDataB: 23
}, {
xAxis: '开始部分',
yDataA: 21,
yDataB: 18
}],
}, function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭柱状图（从内存里清除）
close({params})
params
id：
- 类型：数字
- 描述：要关闭的插件的 id
示例代码
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.close({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏柱状图视图，并未从内存里清除，可调用 show 接口显示该视图
hide({params})
params
id：
- 类型：数字
- 描述：要隐藏的插件的 id
示例代码
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.hide({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示已隐藏的柱状图视图
show({params})
params
id：
- 类型：数字
- 描述：要显示的插件的 id
示例代码
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.show({
id: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
scrollTo
滚动到指定索引的条目，
以插件左边 Y 轴为基准线，
index 设置为 1，则从第二条数据开始显示，以此类推，
index值不可大于条目总数减去每屏显示个数
scrollTo({params})
params
id：
- 类型：数字
- 描述：插件的 id，用于区分插件的多个实例
index：
- 类型：数字
- 描述：（可选项）指定的条目的索引，不可大于总条目数减去每屏显示个数，从0开始
- 默认：0
animation：
- 类型：布尔
- 描述：（可选项）滚动时是否带有动画效果
- 默认：false
示例代码
var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.scrollTo({
id: 1,
index: 3,
animation: true
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。