UIPieChart

open

reloadData

setFrame

close

hide

show

论坛示例

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

概述

UIPieChart是一个饼图数据展示控件，支持开发者自定义数据块样式，支持图标展示，点击可返回当前点击区域数据，支持圆形和环形两种形状饼图展示。

open

**注意:请保证 所有数值加起来不为0 否则无实际意义 **

打开饼图视图

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

params

x：

  • 类型：数字
  • 描述：（可选项）圆心坐标
  • 默认值：0

y：

  • 类型：数字
  • 描述：（可选项）圆心坐标
  • 默认值：100

radius：

  • 类型：数字
  • 描述：（可选项）圆半径
  • 默认值：当前屏幕宽的1/4

type：

  • 类型：字符串类型

  • 描述：（可选项）饼图样式

  • 默认值：'typeCircle'

  • 取值范围：

    • typeCirque (圆环)
    • typeCircle（整圆）

isAnimated：

  • 类型：布尔类型
  • 描述：（可选项）是否带动画
  • 默认值：true

center：

  • 类型：JSON 对象
  • 描述：（可选项）饼形图中间标题样式设置(仅圆环样式下有效)
  • 默认值：见内部字段
  • 内部字段：
{
  
    title：         //（可选项）字符串类型；饼图中间的说明文字，默认：'' 
    titleColor:     //（可选项）字符串类型；标题的颜色，支持 rgb、rgba、#；默认：#000000
    titleSize       //（可选项）数字类型；标题的字体大小；默认：12
    subTitle：      //（可选项）字符串类型；饼图中间的说明文字；默认：''
    subTitleColor   //（可选项）字符串类型；子标题的颜色，支持 rgb、rgba、#；默认：#696969
    subTitleSize    //（可选项）数字类型；子标题的字体大小；默认：12
}

elements：

  • 类型：数组
  • 描述：插件字典对象组成的数组
  • 内部字段：
[{
    value:     //数字类型；本部分的数值大小
    color:     //字符串类型；本部分颜色，支持 rgb、rgba、#；默认：#000000 
    title:    //（可选项）字符串类型；单元格显示的标题，若不传则显示百分比，若传空字符串则显示空字符串
    titleColor//（可选项）字符串类型；标题的颜色，支持 rgb、rgba、#；默认：#ffffff
    titleSize //（可选项）数字类型；标题的字体大小；默认：12
    image:    //单元格显示的图标，若不传则不显示，百分比过小图片不显示
}]

fixedOn:

  • 类型：字符串
  • 描述：（可选项）添加到哪个frame，与fixed一起使用

fixed:

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

callback(ret, err)

ret：

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

    index:           //数字类型；返回饼图0度（圆形最下端）位置的插件的索引值
    value:           //数字类型；返回饼图0度（圆形最下端）位置的插件的值
    percent:         //数字类型；返回饼图0度（圆形最下端）位置的插件的百分比值
    id:              //数字类型；返回饼图视图的id
}

示例代码

var UIPieChart = api.require('UIPieChart');
UIPieChart.open({
    x: api.frameWidth / 2,
    y: api.frameHeight / 2,
    radius: 100,
    type:'typeCircle',
   isAnimated: true,
    center: {
        title: '标题',
        subTitle: '子标题'
    },
    elements: [{
        value: 15,
        color: '#FF6600'
    }, {
        value: 15,
        color: '#660099'
    }, {
        value: 15,
        color: '#FF33FF'
    }, {
        value: 15,
        color: '#66CCFF'
    }, {
        value: 15,
        color: '#00CCFF'
    }],
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新展示数据

注意:请保证 所有数值加起来不为0 否则无实际意义

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

params

id：

  • 类型：数字
  • 描述：操作的视图的id

elements：

  • 类型：数组
  • 描述：插件字典对象组成的数组
  • 内部字段：
[{
    value:     //数字类型；本部分的数值大小
    color:     //字符串类型；本部分颜色，支持 rgb、rgba、#；默认：#000000 
    title：    //（可选项）字符串类型；单元格显示的标题，若不传则显示百分比，若传空字符串则显示空字符串
    titleColor//（可选项）字符串类型；标题的颜色，支持 rgb、rgba、#；默认：#ffffff
    titleSize //（可选项）数字类型；标题的字体大小；默认：12
}]

callback(ret, err)

ret：

  • 类型：JSON 对象

  • 内部字段：

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


## 示例代码

```js
var UIPieChart = api.require('UIPieChart');
UIPieChart.reloadData({
   id: 1,
   elements: [{
       value: 15,
       color: '#FF6600'
   }, {
       value: 15,
       color: '#660099'
   }, {
       value: 15,
       color: '#FF33FF'
   }, {
       value: 15,
       color: '#66CCFF'
   }, {
       value: 15,
       color: '#00CCFF'
   }]
}, function(ret, err) {
   if (ret) {
       api.alert({msg: JSON.stringify(ret)});
   } else {
       api.alert({msg: JSON.stringify(err)});
   }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setFrame

重设插件视图的位置大小

serFrame({params})

params

id：

  • 类型：数字
  • 描述：操作的视图的id

x：

  • 类型：数字
  • 描述：（可选项）圆心坐标
  • 默认值：原值

y：

  • 类型：数字
  • 描述：（可选项）圆心坐标
  • 默认值：原值

radius：

  • 类型：数字
  • 描述：（可选项）圆半径
  • 默认值：原值

anim：

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）改变插件视图大小时是否添加变化过程的动画

示例代码

var UIPieChart = api.require('UIPieChart');
UIPieChart.setFrame({
    id: 1,
    x: 10,
    y: 300,
    anim: true
});

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

close

关闭饼图

close({params})

params

id：

  • 类型：数字
  • 描述：要关闭的饼图的id

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏饼图

hide({params})

params

id：

  • 类型：数字
  • 描述：要隐藏的饼图的id

示例代码

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

补充说明

隐藏饼形图，并没有从内存里清除

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

show

显示已隐藏的饼形图

show({params})

params

id：

  • 类型：数字
  • 描述：要显示的饼图的id

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24