thwartwiseBarChart

open

reloadData

close

hide

show

论坛示例

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

概述

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/04/24