pieChart

来自于：官方立即使用

open reloadData setFrame close hide show

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码供您参考。

概述

pieChart是一个饼图数据展示控件，可识别手势转动该饼图，旋转动画结束返回特定位置的数据库的下标。支持开发者自定义数据块样式

图片说明

open

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

打开饼图视图

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

params

x：

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

y：

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

radius：

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

center：

  • 类型：JSON 对象
  • 描述：（可选项）饼形图中间标题样式设置
  • 默认值：见内部字段
  • 内部字段：
  1. {
  2.     r:’’,           //（可选项）数字类型；中间圆圈的半径；默认：radius/3.0
  3.     bg:’’           //（可选项）字符串类型；中间圆背景颜色，支持 rgb、rgba、# ；默认：#fff
  4.     title：         //（可选项）字符串类型；饼图中间的说明文字，默认：标题 
  5.     titleColor:     //（可选项）字符串类型；标题的颜色，支持 rgb、rgba、#；默认：#000000
  6.     titleSize       //（可选项）数字类型；标题的字体大小；默认：12
  7.     subTitle：      //（可选项）字符串类型；饼图中间的说明文字；默认：子标题
  8.     subTitleColor   //（可选项）字符串类型；子标题的颜色，支持 rgb、rgba、#；默认：#696969
  9.     subTitleSize    //（可选项）数字类型；子标题的字体大小；默认：12
  10. }

elements：

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

fixed:

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

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType:       //字符串类型；回调事件类型，取值范围如下：
  3.                         rotation//拖动旋转事件
  4.                         click   //点击旋转事件，点击色块，该色块旋转到0度
  5.                         open    //打开事件
  6.     index:           //数字类型；返回饼图0度（圆形最下端）位置的模块的索引值
  7.     value:           //数字类型；返回饼图0度（圆形最下端）位置的模块的值
  8.     percent:         //数字类型；返回饼图0度（圆形最下端）位置的模块的百分比值
  9.     id:              //数字类型；返回饼图视图的id
  10. }

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.open({
  3.     x: api.frameWidth / 2,
  4.     y: api.frameHeight / 2,
  5.     radius: 100,
  6.     center: {
  7.         title: '标题',
  8.         subTitle: '子标题'
  9.     },
  10.     elements: [{
  11.         value: 15,
  12.         color: '#FF6600'
  13.     }, {
  14.         value: 15,
  15.         color: '#660099'
  16.     }, {
  17.         value: 15,
  18.         color: '#FF33FF'
  19.     }, {
  20.         value: 15,
  21.         color: '#66CCFF'
  22.     }, {
  23.         value: 15,
  24.         color: '#00CCFF'
  25.     }],
  26.     fixedOn: api.frameName,
  27.     fixed: false
  28. }, function(ret, err) {
  29.     if (ret) {
  30.         alert(JSON.stringify(ret));
  31.     } else {
  32.         alert(JSON.stringify(err));
  33.     }
  34. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新展示数据

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

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

params

id：

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

elements：

  • 类型：数组
  • 描述：模块字典对象组成的数组
  • 内部字段：
  1. [{
  2.     value:       //数字类型；组成部分的大小
  3.     color:       //字符串类型；组成部分的颜色值 ，支持 rgb，rgba，# 
  4.     title：      //（可选项）字符串类型；单元格显示的标题，若为空则显示百分比
  5. }]

callback(ret, err)

ret：

  • 类型：JSON 对象

  • 内部字段：

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

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.reloadData({
  3.     id: 1,
  4.     elements: [{
  5.         value: 15,
  6.         color: '#FF6600'
  7.     }, {
  8.         value: 15,
  9.         color: '#660099'
  10.     }, {
  11.         value: 15,
  12.         color: '#FF33FF'
  13.     }, {
  14.         value: 15,
  15.         color: '#66CCFF'
  16.     }, {
  17.         value: 15,
  18.         color: '#00CCFF'
  19.     }]
  20. }, function(ret, err) {
  21.     if (ret) {
  22.         alert(JSON.stringify(ret));
  23.     } else {
  24.         alert(JSON.stringify(err));
  25.     }
  26. });

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

setFrame

重设模块视图的位置大小

setFrame({params})

params

id：

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

x：

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

y：

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

radius：

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

anim：

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

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.setFrame({
  3.     id: 1,
  4.     x: 10,
  5.     y: 300,
  6.     anim: true
  7. });

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

close

关闭饼图

close({params})

params

id：

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

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.close({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏饼图

hide({params})

params

id：

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

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.hide({
  3.     id: 1
  4. });

补充说明

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

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

show

显示已隐藏的饼形图

show({params})

params

id：

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

示例代码

  1. var pieChart = api.require('pieChart');
  2. pieChart.show({
  3.     id: 1
  4. });

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本