thwartwiseBarChart

来自于：开发者立即使用

open reloadData close hide show

论坛示例

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

概述

thwartwiseBarChart 是一个横着的柱状图模块，开发者可自定义该模块的各种样式。 详情参考实例截图：

图片说明

open

打开横排柱状图模块，当数据条数超过当前显示区域时，可上下滑动查看

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度，支持auto；默认：auto
  5.     h: 200  //（可选项）数字类型；模块的高度，支持auto；默认：w * 2.0/3.0
  6. }

data：

  • 类型：数组
  • 描述：横排柱形图关键结点的数据，数据排列方式为从下而上
  • 内部字段：
  1. [{
  2.     count: 4,                    //数字类型；节点数据大小
  3.     color:'#ff0',                //字符串类型；结点对应柱子的颜色，支持rgb、rgba、#
  4.     id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  5.     title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  6.     ...
  7. },{
  8.     count: 13,                   //字符串类型；节点数据大小
  9.     color:'#EEB422',             //数字类型；结点对应柱子的颜色，支持rgb、rgba、#
  10.     id: 2,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  11.     title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  12.     ...
  13. }]

styles:

  • 类型：
  • 描述：（可选项）模块视图内元素样式设置
  • 默认值：见内部字段
  • 内部字段：
  1. { 
  2.       xAxis: {              //（可选项）JSON 对象；X轴距离底部区域的样式
  3.           height:30,        //（可选项）数字类型；X轴距离底部的高度，默认：30
  4.           bg: '#4A708B',    //（可选项）字符串类型；X轴距离底部区域的背景，支持 rgb、rgba、#；默认:'#4A708B'
  5.           markColor: '#fff',//（可选项）字符串类型；X轴标注字体颜色，支持 rgb、rgba、#；默认:'#fff'
  6.           markSize: 12        //（可选项）数字类型；X轴标注字体大小；默认：12
  7.           max: 25,            //数字类型；x轴标注最大值；默认：25
  8.           min: 0,             //数字类型；x轴标注最小值；默认：0
  9.           step: 5             //数字类型；x 轴刻度间隔；默认：5
  10.       },   
  11.       coordinate: {         //（可选项）JSON 对象；坐标系样式
  12.           bg: '#4A708B',    //（可选项）字符串类型；坐标系背景，支持 rgb、rgba、#；默认:'#4A708B'
  13.           borderSize: 0.5,  //（可选项）数字类型；坐标线粗细；默认：0.5
  14.           borderColor:'#fff'//（可选项）字符串类型；坐标线颜色；默认：#fff
  15.       },    
  16.       bar: {                //（可选项）JSON 对象；柱子样式配置
  17.           width:20,         //（可选项）数字类型；柱子的宽度，默认：20
  18.           interval: 5       //（可选项）数字类型；柱子间隔大小，默认：5
  19.       }     
  20. }

fixedOn：

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

fixed:

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.  id: 1,                 //数字类型；模块的 id，用于区分模块的多个实例
  3.   eventType: 'show',     //字符串类型；交互事件类型
  4.                         //取值范围：
  5.                         //show（打开模块成功）
  6.                         //click（点击柱状图的柱子的点击事件）
  7.   index:                //数字类型；点击柱状图柱子的索引，当 eventType 为 click 时有效
  8.   value:                //数字类型；所点击柱子的值，当 eventType 为 click 时有效
  9.   selectedInfo: {       //JSON 对象，返回所选柱子的数据详情，当 eventType 为 click 时有效
  10.            count: 4,                    //数字类型；节点数据大小
  11.            color:'#ff0',                //字符串类型；结点对应柱子的颜色，支持rgb、rgba、#
  12.            id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  13.            title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）                
  14.            ...
  15.   }                    
  16. }

示例代码

  1. var thwartwiseBarChart = api.require('thwartwiseBarChart');
  2. thwartwiseBarChart.open({
  3.     rect: {
  4.         x: 30,
  5.         y: api.frameHeight / 2 - 170,
  6.         w: api.frameWidth - 60,
  7.         h: 340
  8.     },
  9.     data: [{
  10.         count: 4,
  11.         color: ‘#ff0’
  12.     }, {
  13.         count: 13,
  14.         color: ‘#EE9A00’
  15.     }, {
  16.         count: 17.5,
  17.         color: ‘#6495ED’
  18.     }, {
  19.         count: 23',
  20.         color: ‘#43CD80’
  21.     }, {
  22.         count: 7,
  23.         color: ‘#696969’
  24.     }],
  25.     styles: {
  26.          xAxis: {              
  27.           height:30,        
  28.           bg: '#4A708B',   
  29.           markColor: '#fff',
  30.           markSize: 12,      
  31.           max: 25,            
  32.           min: 0,             
  33.           step: 5             
  34.       },   
  35.       coordinate: {         
  36.           bg: '#4A708B',    
  37.           borderSize: 0.5,  
  38.           borderColor:'#fff'
  39.       },    
  40.       bar: {                
  41.           width:20,         
  42.           interval: 5       
  43.       }     
  44.     },
  45.     fixedOn: api.frameName,
  46.     fixed: false
  47. }, function(ret) {
  48.     if (ret) {
  49.         alert(JSON.stringify(ret));
  50.     }
  51. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

重新加载数据，当数据条数超过当前显示区域时，可上下滑动查看

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

params

id：

  • 类型：数字
  • 描述： 要刷新数据的模块的 id

data：

  • 类型：数组
  • 描述：横排柱形图关键结点的数据，数据排列方式为从下而上
  • 内部字段：
  1. [{
  2.     count: 4,                    //数字类型；节点数据大小
  3.     color:'#ff0',                //字符串类型；结点对应柱子的颜色，支持rgb、rgba、#
  4.     id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  5.     title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  6.     ...
  7. },{
  8.     count: 13,                   //字符串类型；节点数据大小
  9.     color:'#EEB422',             //数字类型；结点对应柱子的颜色，支持rgb、rgba、#
  10.     id: 2,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  11.     title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
  12.     ...
  13. }]

callback(ret)

ret：

  • 类型：JSON 对象

  • 内部字段：

    1. {
    2.      status: true,        //布尔类型；数据源是否刷新成功， true|false
    3.      count: 20            //数字类型；刷新数据后总数据量数 
    4. }

示例代码

  1. var thwartwiseBarChart = api.require('thwartwiseBarChart');
  2. thwartwiseBarChart.reloadData({
  3.     id: 1,
  4.     data: [{
  5.         count: 4,
  6.         color: ‘#ff0’
  7.     }, {
  8.         count: 19,
  9.         color: ‘#EE9A00’
  10.     }, {
  11.         count: 27.5,
  12.         color: ‘#6495ED’
  13.     }, {
  14.         count: 3',
  15.         color: ‘#43CD80’
  16.     }, {
  17.         count: 17,
  18.         color: ‘#696969’
  19.     }]
  20. }, function(ret) {
  21.     if (ret) {
  22.         alert(JSON.stringify(ret));
  23.     }
  24. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭柱状图，并从内存里清除

close({params})

params

id：

  • 类型：数字
  • 描述：要关闭的模块的 id

示例代码

  1. var thwartwiseBarChart = api.require('thwartwiseBarChart');
  2. thwartwiseBarChart.close({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏柱状图视图，并没有从内存里清除，可调用 show 接口显示

hide({params})

params

id：

  • 类型：数字
  • 描述：要隐藏的模块的 id

示例代码

  1. var thwartwiseBarChart = api.require('thwartwiseBarChart');
  2. thwartwiseBarChart.hide({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的柱状图视图

show({params})

params

id：

  • 类型：数字
  • 描述：要显示的模块的 id

示例代码

  1. var thwartwiseBarChart = api.require('thwartwiseBarChart');
  2. thwartwiseBarChart.show({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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