doubleBarChart

论坛示例

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

概述

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) {
        api.alert({msg: 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 对象

  • 内部字段:

    ```js { status: true, //布尔类型;数据源是否刷新成功, true|false count: 20 //数字类型;刷新数据后总数据量数(两个柱子为一条数据) }


## 示例代码
```js
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) {
       api.alert({msg: 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及更高版本

论坛示例

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

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