barChart

来自于：APICloud

Method

open reloadData setFrame close hide show

概述

barChart是一个柱状图模块，非常形象的显示出数据走势。开发者只需简单的配置相应的参数，即可实现一个立体的柱状图。极大的简化了前端实现柱状图开发的代码。开发者可自定义x，y轴以及柱子的个数和颜色。本模块已停止更新，建议使用优化升级版模块 UIBarChart

open

打开柱状图视图

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

params

x ：

类型：数字
默认值：0
描述：（可选项）视图左上角点坐标

y ：

类型：数字
默认值：100
描述：（可选项）视图左上角点坐标

w ：

类型：数字
默认值：当前设备屏幕的宽
描述：（可选项）视图的宽

h ：

类型：数字
默认值：w-20
描述：（可选项）视图的高

yAxisMax：

类型：数字
默认值：50
描述：（可选项）坐标系y轴配置参数，y轴上的最大值

yAxisStep：

类型：数字
默认值：10
描述：（可选项）坐标系y轴配置参数，Y轴上数据的步幅

xAxisMarks：

类型：数组对象
默认值：无
描述：x轴上各个标注所组成的数组，数组元素类型为字符串

datas：

类型：数组对象
默认值：无
描述：各个柱图的数据大小组成的数组，数组元素类型为数字

fixedOn：

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

fixed:

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

style:

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

{
      yAxisBg:       //（可选项）y轴背景色，支持 rgb，rgba，#，img，默认绿色
      yAxisMark:     //（可选项）y轴标注色，支持 rgb，rgba，#，默认白色
      yAxisMarkSize: //（可选项）y轴标注字体大小，数字类型，默认12
      xAxisBg:       //（可选项）x轴背景设置，支持 rgb，rgba，#，img，默认蓝色
      xAxisMark:     //（可选项）x轴标注色，支持 rgb，rgba，#，默认白色
      xAxisMarkSize: //（可选项）x轴标注字体大小，数字类型，默认12
      xAxisInterval: //（可选项）x轴上边背景设置，支持 rgb，rgba，#，img，默认黄
      bg:            //（可选项）模块视图背景设置，支持 rgb，rgba，#，img，默认背景图
      barBg：        //（可选项）柱子背景设置，支持 rgb，rgba，#，img，默认灰色
      bar:           //（可选项）柱子显示设置，支持 rgb，rgba，#，img，默认蓝色
      barWidth:      //（可选项）柱子的宽度，数字类型，默认27
      interval:      //（可选项）柱子之间的间距，数字类型，默认18
}

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

{
     id:  //打开视图的id
     index: //点击柱状图柱子的下标 
}

示例代码

var barChart = api.require('barChart');
barChart.open({
    x: 0,
    y: 64,
    width: 320,
    height: 300,
    yAxisMax: 50,
    yAxisStep: 10,
    xAxisMarks: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    datas: [10, 30, 40, 5, 3, 49, 55, 23],
    id: 1
}, function(ret, err) {
    api.alert({
        msg: ret.index + ret.id
    });
});

补充说明

打开柱状图

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

重新加载数据

reloadData({params})

params

id ：

类型：数字
默认值：无
描述：操作的视图的id

xAxisMarks ：

类型：数组对象
默认值：原值数组
描述：（可选项）x轴上各个标注所组成的数组，数组元素类型为字符串

datas：

类型：数组对象
默认值：原值数组
描述：（可选项）各个柱图的数据大小组成的数组，数组元素类型为数字

示例代码

var barChart = api.require('barChart');
barChart.reloadData({
    xAxisMarks: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    datas: [15, 30, 40, 5, 3, 49, 55, 23]
}, function(ret, err) {
    api.alert({
        msg: ret.index + ret.id
    });
});

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

setFrame

重设模块视图的位置大小

setFrame({params})

params

id ：

类型：数字
默认值：无
描述：操作的视图的id

x ：

类型：数字
默认值：原值
描述：（可选项）视图左上角点坐标

y ：

类型：数字
默认值：原值
描述：（可选项）视图左上角点坐标

w ：

类型：数字
默认值：原值
描述：（可选项）视图的宽

h ：

类型：数字
默认值：原值
描述：（可选项）视图的高

anim ：

类型：布尔
默认值：false
描述：（可选项）改变模块视图大小时是否添加变化过程的动画

示例代码

var barChart = api.require('barChart');
barChart.setFrame({
    x: 10,
    w: 300
});

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

close

关闭柱状图

close({params})

params

id ：

类型：数字
默认值：无
描述：操作视图的id

示例代码

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

补充说明

关闭柱状图

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏柱状图视图

hide({params})

params

id ：

类型：数字
默认值：无
描述：操作视图的id

示例代码

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

补充说明

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

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

show

显示柱状图

show({params})

params

id ：

类型：数字
默认值：无
描述：操作视图的id

示例代码

var barChart = api.require('barChart');
barChart.show({
    id: 1
});

补充说明

显示已隐藏的柱状图视图

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本