doubleBarChart

Method

reloadData hide scrollTo

论坛示例

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

概述

doubleBarChart 是一个柱状图模块，可自定义 X、Y 轴样式以及柱子的个数和颜色。本模块可监听左右拖动到头的事件，可向当前数据拼接加载、刷新等操作。同一个页面可以打开多个模块实例，以模块 id 区分。

open

打开柱状图视图

open({params}, callback(ret))

rect：

类型：JSON 对象
描述：（可选项）模块的位置及尺寸
内部字段：

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
          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 对象
内部字段：

示例代码

var doubleBarChart = api.require('doubleBarChart');
    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',
      bar: {                
          width:20,        
          bgA: '#FFD700',   
          bgB: '#8DEEEE',   
          interval: 20     
      }   
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret) {
    if (ret) {
        alert(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 对象

内部字段：

{
     status: true,        //布尔类型；数据源是否刷新成功， true|false
     count: 20            //数字类型；刷新数据后总数据量数（两个柱子为一条数据） 
}

可用性

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
});

可用性

可提供的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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本