doubleBarChart

来自于：开发者立即使用

• Method

open reloadData close hide show scrollTo

论坛示例

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

概述

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

open

打开柱状图视图

open({params}, callback(ret))

params

rect：

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

{
    x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
    y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
    w: 320, //（可选项）数字类型；模块的宽度；默认：auto
    h: 200  //（可选项）数字类型；模块的高度；默认：w 
}

yAxis：

• 类型：JSON 对象
• 描述：双柱状图的 Y 轴配置
• 内部字段：

{
    max: 30,            //数字类型；y 轴最大值；默认：30
    min: 0,             //数字类型；y 轴最小值；默认：0
    step: 5,            //数字类型；y 轴刻度间隔；默认：5
}

data：

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

[{
    xAxis: '开始部分',            //字符串类型；关键结点的x轴数据说明文字
    yDataA: 13,                  //数字类型；关键结点在 y 轴的数据1
    yDataB: 16,                  //数字类型；关键结点在 y 轴的数据2
    id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
},{
    xAxis: '准备部分',            //字符串类型；关键结点的x轴数据
    yDataA: 22,                  //数字类型；关键结点在 y 轴的数据1
    yDataB: 24,                  //数字类型；关键结点在 y 轴的数据2
    id: 2,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
}]

styles:

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

{
      yAxis: {              //（可选项）JSON 对象；Y轴样式
          width:30,         //（可选项）数字类型；Y轴宽度，默认：30
          bg: '#2F4F4F',    //（可选项）字符串类型；Y轴背景，支持 rgb、rgba、#；默认:'#2F4F4F'
          markColor: '#fff',//（可选项）字符串类型；Y轴标注字体颜色，支持 rgb、rgba、#，默认:'#fff'
          markSize: 12      //（可选项）数字类型；Y轴标注字体大小，默认：12
      },   
      xAxis: {              //（可选项）JSON 对象；X轴样式
          height:30,        //（可选项）数字类型；X轴高度，默认：30
          bg: '#2F4F4F',    //（可选项）字符串类型；X轴背景，支持 rgb、rgba、#；默认:'#2F4F4F'
          markColor: '#fff',//（可选项）字符串类型；X轴标注字体颜色，支持 rgb、rgba、#，默认:'#fff'
          markSize: 12      //（可选项）数字类型；X轴标注字体大小，默认：12
      },   
      coordinate: {         //（可选项）JSON 对象；坐标系样式
          bg: '#2F4F4F',    //（可选项）字符串类型；坐标系背景，支持 rgb、rgba、#；默认:'#2F4F4F'
          horizontal:'#fff',//（可选项）字符串类型；坐标系中横线颜色，支持rgb、rgba、#；默认：#fff
          borderSize: 0.5   //（可选项）数字类型；坐标系中分割线粗细；默认：0.5
      },    
      bar: {                //（可选项）JSON 对象；柱子样式配置
          width:20,         //（可选项）数字类型；柱子的宽度，默认：20
          bgA: '#FFD700',   //（可选项）字符串类型；柱子A的背景色，支持 rgb、rgba、#；默认:'#FFD700'
          bgB: '#8DEEEE',   //（可选项）字符串类型；柱子B的背景色，支持 rgb、rgba、#；默认:'#8DEEEE'
          interval: 20      //（可选项）数字类型；每条数据柱子（两个柱子）间隔大小，默认：20
      }    
}

showData:

• 类型：布尔
• 描述：（可选项）是否显示每条柱子上的数据（数据样式通y轴标注字体样式）
• 默认值：true

fixedOn：

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

fixed:

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

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
 id: 1,                 //数字类型；模块的 id，用于区分模块的多个实例
 eventType: 'show',     //字符串类型；交互事件类型
                        //取值范围：
                        //show（打开模块成功）
                        //click（点击柱状图的柱子的点击事件）
                        //reachLeftmost（拖动柱图至左边缘并超过一定阈值触发的事件）
                        //reachRightmost（拖动柱图至右边缘并超过一定阈值触发的事件）
  index:                //数字类型；点击柱状图柱子的索引，当 eventType 为 click 时有效
  value:                //数字类型；所点击柱子的值，当 eventType 为 click 时有效
  selectedInfo: {       //JSON 对象，返回所选柱子的数据详情，当 eventType 为 click 时有效
          xAxis: '基本部分',               
          yDataA: 7,                 
          yDataB: 9,                  
          id: 1,                      
          title: '',                  
          ...
  }                    
}

示例代码

var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    yAxis: {
        max: 30,
        min: 0,
        step: 5
    },
    data: [{
        xAxis: '开始部分',
        yDataA: 13,
        yDataB: 16
    }, {
        xAxis: '准备部分',
        yDataA: 22,
        yDataB: 24
    }, {
        xAxis: '基本部分',
        yDataA: 7,
        yDataB: 9
    }, {
        xAxis: '开始部分',
        yDataA: 14,
        yDataB: 18
    }],
    styles: {
        yAxis: {
            width: 30,
            bg: '#B2DFEE',
            markColor: '#fff',
            markSize: 12
        },
        xAxis: {
            height: 30,
            bg:'#2F4F4F'
            markColor: '#fff',
            markSize: 12
        },
      coordinate: {         
          bg: '#2F4F4F',   
          horizontal:'#fff',
          borderSize: 0.5   
      },    
      bar: {                
          width:20,        
          bgA: '#FFD700',   
          bgB: '#8DEEEE',   
          interval: 20     
      }   
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    } 
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

重新加载数据

reloadData({params}, callback(ret))

params

id：

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

type：

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

data：

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

[{
    xAxis: '开始部分',            //字符串类型；关键结点的x轴数据说明文字
    yDataA: 13,                  //数字类型；关键结点在 y 轴的数据1
    yDataB: 16,                  //数字类型；关键结点在 y 轴的数据2
    id: 1,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
},{
    xAxis: '准备部分',            //字符串类型；关键结点的x轴数据
    yDataA: 22,                  //数字类型；关键结点在 y 轴的数据1
    yDataB: 24,                  //数字类型；关键结点在 y 轴的数据2
    id: 2,                       //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    title: '',                   //开发者可自定义扩展参数 ，可在回调函数内获取（selectedInfo）
    ...
}]

callback(ret, err)

ret：

• 类型：JSON 对象

• 内部字段：

  {
       status: true,        //布尔类型；数据源是否刷新成功， true|false
       count: 20            //数字类型；刷新数据后总数据量数（两个柱子为一条数据） 
  }

示例代码

var doubleBarChart = api.require('doubleBarChart');
doubleBarChart.reloadData({
    id: 1,
    type: '',
    data: [{
        xAxis: '开始部分',
        yDataA: 13,
        yDataB: 22
    }, {
        xAxis: '准备部分',
        yDataA: 13,
        yDataB: 24
    }, {
        xAxis: '基本部分',
        yDataA: 7,
        yDataB: 23
    }, {
        xAxis: '开始部分',
        yDataA: 21,
        yDataB: 18
    }],
}, function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    } 
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭柱状图（从内存里清除）

close({params})

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

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

hide({params})

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的柱状图视图

show({params})

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

scrollTo

滚动到指定索引的条目，

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

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

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

scrollTo({params})

params

id：

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

index：

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

animation：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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