UIGraph

来自于：官方立即使用

open close show hide reloadData

论坛示例

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

概述

UIGraph 是一个贝塞尔曲线模块。开发者可自定义背景、线条、坐标系等UI样式和数据源，可监听用户点击结点事件。用于实现数据可视化的功能。UIGraph 模块是 graph 模块的优化版。

图片说明

open

打开贝塞尔曲线模块

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

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,       //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,       //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320,     //（可选项）数字类型；模块的宽度；默认：所属 Window 或 Frame 的宽度
  5.     h: 220      //（可选项）数字类型；模块的高度；默认：w - 100
  6. }

yAxis：

  • 类型：JSON 对象
  • 描述：曲线图的y轴信息
  • 内部字段：
  1. {
  2.     max: 80,            //数字类型；y轴最大值
  3.     min: 0,             //数字类型；y轴最小值
  4.     step: 20,           //数字类型；y轴刻度间隔
  5.     unit: '%'           //字符串类型；y轴数据单位
  6. }

data：

  • 类型：数组
  • 描述：曲线关键结点的数据
  • 内部字段：
  1. [{
  2.     xAxis: '一月',                //字符串类型；关键结点的x轴数据
  3.     yAxis: 80                     //数字类型；关键结点的y轴数据
  4. },{
  5.     xAxis: '二月',                //字符串类型；关键结点的x轴数据
  6.     yAxis: 56                     //数字类型；关键结点的y轴数据
  7. }]

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     bg: '#fff',                   //（可选项）字符串类型；曲线图的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'#fff'
  3.     axisColor: '#A9A9A9',         //（可选项）字符串类型；曲线图的坐标轴颜色，支持 rgb，rgba，#；默认：'#A9A9A9'
  4.     nodeColor: '#000',            //（可选项）字符串类型；曲线图的结点边框的颜色，支持 rgb，rgba，#；默认：'#000'
  5.     lineColor: '#1E90FF',         //（可选项）字符串类型；曲线的颜色，支持 rgb，rgba，#；默认：'#1E90FF'
  6.     lineWidth: 1,                 //（可选项）数字类型；曲线的宽度；默认：1
  7.     markColor: '#000',            //（可选项）字符串类型；坐标轴文字的字体颜色，支持 rgb，rgba，#；默认：'#000'
  8.     markSize:  16,                //（可选项）数字类型；坐标轴文字的字体大小；默认：16
  9.     bubble: {                     //（可选项）JSON对象；点击结点弹出气泡的样式
  10.         bgImg: 'widget://',       //（可选项）字符串类型；点击结点弹出气泡的背景图，android 暂不支持此参数
  11.         size: 14                  //（可选项）数字类型；点击结点弹出气泡的字体大小；默认：14
  12.     }
  13. }

showNode：

  • 类型：布尔
  • 描述：（可选项）是否默认显示结点
  • 默认值：true

fixedOn：

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

fixed:

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

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     id: 1,                          //数字类型；模块的 id，用于区分模块的多个实例
  3.     eventType: 'reachLeftmost',     //字符串类型；交互事件类型
  4.                                     //取值范围：
  5.                                     //show（打开模块成功）
  6.                                     //reachLeftmost（拖动曲线图至左边缘）
  7.                                     //reachRightmost（拖动曲线图至右边缘）
  8.                                     //zoomIn（放大曲线图）
  9.                                     //zoomOut（缩小曲线图）
  10.     index: 6                        //数字类型；缩放曲线图时，返回缩放中心结点的数据在 data 数组中的索引
  11. }

示例代码

  1. var UIGraph = api.require('UIGraph');
  2. UIGraph.open({
  3.     rect: {
  4.         x: 30,
  5.         y: api.frameHeight / 2 - 170,
  6.         w: api.frameWidth - 60,
  7.         h: 340
  8.     },
  9.     yAxis: {
  10.         max: 80,
  11.         min: 0,
  12.         step: 20,
  13.         unit: '%'
  14.     },
  15.     data: [{
  16.         xAxis: '一月',
  17.         yAxis: 15
  18.     }, {
  19.         xAxis: '二月',
  20.         yAxis: 65
  21.     }, {
  22.         xAxis: '三月',
  23.         yAxis: 55
  24.     }, {
  25.         xAxis: '四月',
  26.         yAxis: 0
  27.     }],
  28.     styles: {
  29.         bg: '#fff',
  30.         axisColor: '#A9A9A9',
  31.         nodeColor: '#000',
  32.         lineColor: '#1E90FF',
  33.         lineWidth: 1,
  34.         markColor: '#000',
  35.         markSize: 16,
  36.         bubble: {
  37.             bgImg: '',
  38.             size: 14
  39.         }
  40.     },
  41.     showNode: true,
  42.     fixedOn: api.frameName,
  43.     fixed: true
  44. }, function(ret, err) {
  45.     if (ret) {
  46.         alert(JSON.stringify(ret));
  47.     } else {
  48.         alert(JSON.stringify(err));
  49.     }
  50. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭曲线图模块

close({params})

params

id：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示曲线图模块

show({params})

params

id：

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

示例代码

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

可用性

iOS系统，安卓系统

可提供的1.0.1及更高版本

hide

隐藏曲线图模块

hide({params})

params

id：

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

示例代码

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

可用性

iOS系统，安卓系统

可提供的1.0.1及更高版本

reloadData

更新曲线图的数据

reloadData({params})

params

id：

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

xScale:

  • 类型：数字
  • 描述：曲线x轴缩放比例

type：

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

data：

  • 类型：数组
  • 描述：要更新的数据
  • 内部字段：
  1. [{
  2.     xAxis: '一月',                //字符串类型；关键结点的x轴数据
  3.     yAxis: 80                     //数字类型；关键结点的y轴数据
  4. },{
  5.     xAxis: '二月',                //字符串类型；关键结点的x轴数据
  6.     yAxis: 56                     //数字类型；关键结点的y轴数据，
  7. }]

示例代码

  1. var UIGraph = api.require('UIGraph');
  2. UIGraph.reloadData({
  3.     id: 1,
  4.     type: 'prepend',
  5.     data: [{
  6.         xAxis: '五月',
  7.         yAxis: 45
  8.     }, {
  9.         xAxis: '六月',
  10.         yAxis: 70
  11.     }, {
  12.         xAxis: '七月',
  13.         yAxis: 20
  14.     }, {
  15.         xAxis: '八月',
  16.         yAxis: 85
  17.     }]
  18. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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