UIBarChart

论坛示例

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

概述

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

open

打开柱状图视图

open({params}, callback(ret, err))

rect：

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

yAxis：

类型：JSON 对象
描述：柱状图的y轴信息
内部字段：


    max: 50,            //数字类型；y轴最大值
    min: 0,             //数字类型；y轴最小值
    step: 20,           //数字类型；y轴刻度间隔
}

data：

类型：数组
描述：柱状图关键结点的数据
内部字段：

[{
    xAxis: '一月',                //字符串类型；关键结点的x轴数据
    yAxis: 80,                   //数字类型；关键结点的y轴数据
    id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
},{
    xAxis: '二月',                //字符串类型；关键结点的x轴数据
    yAxis: 56,                   //数字类型；关键结点的y轴数据
    id: 2,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
}]

text：

类型：JSON 对象
描述：（可选项）X、Y轴说明文字配置
内部字段：

{
    xAxis: 'X轴',          //（可选项）字符串类型；x 轴标注文字；默认：X轴
    yAxis: 'Y轴'           //（可选项）字符串类型；y 轴标注文字；默认：Y轴
}

styles:

类型：
描述：（可选项）模块视图内元素样式设置
默认值：见内部字段
内部字段：

showData:

类型：布尔
描述：（可选项）点击柱状图，是否显示该条目数据
默认值：false

fixedOn：

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

fixed:

类型：布尔
描述：（可选项）模块是否随所属 window 或 frame 滚动
默认值：true（不随之滚动）

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

{
 id: 1,                 //数字类型；模块的 id，用于区分模块的多个实例
  eventType: 'show',     //字符串类型；交互事件类型
                        //show（打开模块成功）
                        //click（点击柱状图的柱子的点击事件）
                        //reachLeftmost（拖动柱图至左边缘）
                        //reachRightmost（拖动柱图至右边缘）
  index:                //数字类型；点击柱状图柱子的索引，当 eventType 为 click 时有效
  value:                //数字类型；所点击柱子的值，当 eventType 为 click 时有效
  selectedInfo: {       //JSON 对象，返回所选柱子的数据详情，当 eventType 为 click 时有效
          xAxis: '二月',               
          yAxis: 56,                   
          id: 1,                      
          title: '',                  
          ...
  }                    
}

示例代码

var UIBarChart = api.require('UIBarChart');
UIBarChart.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    yAxis: {
        max: 50,
        min: 0,
        step: 10
    },
    data: [{
        xAxis: '一月',
    }, {
        xAxis: '二月',
        yAxis: 0
    }, {
        xAxis: '三月',
        yAxis: 16
    }, {
        xAxis: '四月',
        yAxis: 36
    }, {
        xAxis: '五月',
        yAxis: 26
    }, {
        xAxis: '六月',
        yAxis: 46
    }, {
        xAxis: '七月',
        yAxis: 66
    }, {
        xAxis: '八月',
        yAxis: 11
    }, {
        xAxis: '九月',
        yAxis: 8
    }, {
        xAxis: '十月',
        yAxis: 56
    }, {
        xAxis: '十一月',
        yAxis: 61
    }, {
        xAxis: '十二月',
        yAxis: 35
    }],
    styles: {
        yAxis: {
            width: 30,
            bg: '#B2DFEE',
            markColor: '#fff',
            markSize: 12
        },
        xAxis: {
            height: 30,
            bg: '#B2DFEE',
            markColor: '#fff',
            markSize: 12
        },
        coordinate: {
            bg: '#FCFCFC',
        },
        bar: {
            width: 30,
            bg: '#696969',
        }
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

reloadData({params}, callback(ret, err))

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

type：

类型：字符串
描述：更新数据的方式
默认值：’updateAll’
取值范围：
- prepend（往数据源头部追加数据）
- append（往数据源尾部追加数据）
- updateAll（更新所有数据）

data：

类型：数组
描述：要更新的数据
内部字段：

[{
    xAxis: '一月',            //字符串类型；关键结点的x轴数据
    yAxis: 80                //数字类型；关键结点的y轴数据
},{
    xAxis: '二月',            //字符串类型；关键结点的x轴数据
    yAxis: 56                //数字类型；关键结点的y轴数据，
}]

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

示例代码

var UIBarChart = api.require('UIBarChart');
UIBarChart.reloadData({
    id: 1,
    type: 'prepend',
    data: [{
        xAxis: '五月',
        yAxis: 45
    }, {
        xAxis: '六月',
        yAxis: 70
    }, {
        xAxis: '七月',
        yAxis: 20
    }, {
        xAxis: '八月',
        yAxis: 85
    }]
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭柱状图

close({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

示例代码

var UIBarChart = api.require('UIBarChart');
UIBarChart.close({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏柱状图视图

hide({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

示例代码

var UIBarChart = api.require('UIBarChart');
UIBarChart.hide({
    id: 1
});

补充说明

隐藏已显示的柱状图视图，并没有从内存里清除

可提供的1.0.0及更高版本

show

显示已隐藏的柱状图视图

show({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

scrollTo

滚动到指定索引的条目，

以模块左边 Y 轴为基准线，

index 设置为 1，则从第二条数据开始显示，以此类推，

index值不可大于条目总数减去每屏显示个数

scrollTo({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

index：

类型：数字
描述：（可选项）指定的条目的索引，不可大于总条目数减去每屏显示个数，从0开始
默认：0

animation：

类型：布尔
描述：（可选项）滚动时是否带有动画效果
默认：false

示例代码

var UIBarChart = api.require('UIBarChart');
UIBarChart.scrollTo({
    id: 1,
    index: 3,
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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