thwartwiseBarChart

论坛示例

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

概述

thwartwiseBarChart 是一个横着的柱状图插件,开发者可自定义该插件的各种样式。 详情参考实例截图:

图片说明

open

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

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,   //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320, //(可选项)数字类型;插件的宽度,支持auto;默认:auto
    h: 200  //(可选项)数字类型;插件的高度,支持auto;默认:w * 2.0/3.0
}

data:

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

styles:

  • 类型:
  • 描述:(可选项)插件视图内元素样式设置
  • 默认值:见内部字段
  • 内部字段:
{ 
      xAxis: {              //(可选项)JSON 对象;X轴距离底部区域的样式
          height:30,        //(可选项)数字类型;X轴距离底部的高度,默认:30
          bg: '#4A708B',    //(可选项)字符串类型;X轴距离底部区域的背景,支持 rgb、rgba、#;默认:'#4A708B'
          markColor: '#fff',//(可选项)字符串类型;X轴标注字体颜色,支持 rgb、rgba、#;默认:'#fff'
          markSize: 12        //(可选项)数字类型;X轴标注字体大小;默认:12
          max: 25,            //数字类型;x轴标注最大值;默认:25
          min: 0,             //数字类型;x轴标注最小值;默认:0
          step: 5             //数字类型;x 轴刻度间隔;默认:5
      },   
      coordinate: {         //(可选项)JSON 对象;坐标系样式
          bg: '#4A708B',    //(可选项)字符串类型;坐标系背景,支持 rgb、rgba、#;默认:'#4A708B'
          borderSize: 0.5,  //(可选项)数字类型;坐标线粗细;默认:0.5
          borderColor:'#fff'//(可选项)字符串类型;坐标线颜色;默认:#fff
      },    
      bar: {                //(可选项)JSON 对象;柱子样式配置
          width:20,         //(可选项)数字类型;柱子的宽度,默认:20
          interval: 5       //(可选项)数字类型;柱子间隔大小,默认:5
      }     
}

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:插件依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)插件是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

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

示例代码

 var thwartwiseBarChart = api.require('thwartwiseBarChart');
thwartwiseBarChart.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    data: [{
        count: 4,
        color: '#ff0'
    }, {
        count: 13,
        color: '#EE9A00'
    }, {
        count: 17.5,
        color: '#6495ED'
    }, {
        count: 23,
        color: '#43CD80'
    }, {
        count: 7,
        color: '#696969'
    }],
    styles: {
         xAxis: {              
          height:30,        
          bg: '#4A708B',   
          markColor: '#fff',
          markSize: 12,      
          max: 25,            
          min: 0,             
          step: 5             
      },   
      coordinate: {         
          bg: '#4A708B',    
          borderSize: 0.5,  
          borderColor:'#fff'
      },    
      bar: {                
          width:20,         
          interval: 5       
      }     
    },
    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, err))

params

id:

  • 类型:数字
  • 描述: 要刷新数据的插件的 id

data:

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

callback(ret)

ret:

  • 类型:JSON 对象

  • 内部字段:

    ```js { status: true, //布尔类型;数据源是否刷新成功, true|false count: 20 //数字类型;刷新数据后总数据量数 }


## 示例代码

```js
var thwartwiseBarChart = api.require('thwartwiseBarChart');
thwartwiseBarChart.reloadData({
   id: 1,
   data: [{
       count: 4,
       color: ‘#ff0’
   }, {
       count: 19,
       color: ‘#EE9A00’
   }, {
       count: 27.5,
       color: ‘#6495ED’
   }, {
       count: 3',
       color: ‘#43CD80’
   }, {
       count: 17,
       color: ‘#696969’
   }]
}, function(ret) {
   if (ret) {
       api.alert({
           msg: JSON.stringify(ret)
       })
   }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

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

close({params})

params

id:

  • 类型:数字
  • 描述:要关闭的插件的 id

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

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

hide({params})

params

id:

  • 类型:数字
  • 描述:要隐藏的插件的 id

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的柱状图视图

show({params})

params

id:

  • 类型:数字
  • 描述:要显示的插件的 id

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10