UIChartline

来自于：AC模块工作室立即使用

open close reloadData show hide

概述

UIChartline是一个将用户数据绘制成曲线图的模块，线条有曲线折线两种选择，可以绘制多条，并且可以根据手势方法缩小与滑动查看，开发者可以自定义线条宽度、颜色，是否显示圆点和圆点颜色，x轴y轴的数据类型和轴线颜色以及背景颜色

open

打开曲线图

open(params)

params

xTitles:

  • 类型：数组类型
  • 描述：x轴数据

valuesArray:

  • 类型：数组类型(二维数组表示多条曲线)
  • 描述：曲线图数据,传入绘制曲线图

chartLineType:

  • 类型：数字类型
  • 描述：(可选项）线条类型，0为曲线，1为折线
  • 默认：0

base:

  • 类型：JSON对象
  • 描述：(可选项）曲线图相关配置
  1. {
  2.     ishint: true,        //（可选项）布尔类型；是否显示点击弹出框；默认值：true
  3.     isdot: true,        //（可选项）布尔类型；是否显示圆点；默认值：true
  4.     dot:'#000000',      //(可选项) 字符串类型；圆点背景颜色,支持rgb、rgba、#； 默认 '#000000'
  5.     showData:true,      //(可选项) 布尔类型；是否显示数据；默认值：true(ios不支持)
  6.     animation: true,    //（可选项）布尔类型；是否显示绘制动画；默认值：true
  7.     animationTime: 3,   //（可选项）数字类型；动画时间；默认值：1
  8.     yUnit:'%',          //(可选项) 字符串类型；y轴单位； 默认 ''（android不支持）
  10. }

rect:

  • 类型：JSON对象
  • 描述：(可选项）曲线图大小及坐标
  1. {
  2.       x: 0,      //（可选项）数字类型；曲线图 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
  3.       y: 0,      //（可选项）数字类型；曲线图 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
  4.       w: 320,    //（可选项）数字类型；支持设置'auto'；曲线图长（相对于所属的 Window 或 Frame）；默认值：所属的 Window 或 Frame的宽
  5.       h: 200,    //（可选项）数字类型；支持设置'auto'；曲线图高（相对于所属的 Window 或 Frame）；默认值：200
  7. }

styles:

  • 类型：JSON对象
  • 描述：(可选项）模块样式配置
  1. {
  2.     bg:'#CCFF33',                //(可选项) 字符串类型；曲线图背景颜色； 默认 '#ffffff'
  3.     line:{                       //(可选项) JSON对象；曲线相关设置
  4.         lineBg:['#3300FF','#339900'],        //(可选项) 数组类型；曲线颜色，支持支持rgb、rgba、#；默认 '#FF0000'
  5.         lineWidth:2,            //(可选项) 数字类型；曲线宽度；默认：2
  6.     },
  7.     axis:{                       //(可选项) JSON对象；曲线相关设置
  8.         axisBg:'#FFA500',       //(可选项) 字符串类型；轴颜色，支持支持rgb、rgba、#；默认 '#FFA500'
  9.         axisWidth:2,            //(可选项) 字符串类型；轴宽度；默认：2
  10.         yLabNumber:10,    //(可选项) 数字类型；Y轴的刻度个数； 默认 '10'（android不支持）
  12.     },
  13.     assistLine:{
  14.         yenable: true,      //（可选项）布尔类型；是否显示横线辅助线；默认值：true
  15.         ywidth: 1,          //（可选项）数字类型；横线辅助线宽度；默认值：1
  16.         ycolor: '#CCCCCC', //(可选项) 字符串类型；横线辅助线颜色,支持支持rgb、rgba、#； 默认 '#CCCCCC'
  17.         xenable: true,      //（可选项）布尔类型；是否显示纵线辅助线；默认值：true
  18.         xwidth: 1,          //（可选项）数字类型；横纵线辅助线宽度；默认值：1
  19.         xcolor:'#CCCCCC'  //(可选项) 字符串类型；纵线辅助线颜色,支持支持rgb、rgba、#； 默认  '#CCCCCC'
  20.     },
  21.     assistLable:{
  23.         xcoordColor:'#000000', //(可选项) 字符串类型；x轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
  24.         xlabFont:10,    //(可选项) 数字类型；x轴字体大小； 默认 10
  25.         ycoordColor:'#000000', //(可选项) 字符串类型；y 轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
  26.         ylabFont:10,    //(可选项) 数字类型；y轴字体大小； 默认 10
  27.         unitColor:'#000000', //(可选项) 字符串类型；单位字体颜色,支持支持rgb、rgba、#； 默认  '#000000'（android不支持）
  28.         unitlabFont:10    //(可选项) 数字类型；单位字体大小； 默认 10（android不支持）
  29.           },
  30.       marker:{ //弹窗样式
  31.         bgColor:'rgba(0,0,0,0.8)',   //(可选项) 字符串类型；背景颜色,支持支持rgb、rgba、#； 默认  'rgba(0,0,0,0.8)'
  32.         textColor:'#FFFFFF',         //(可选项) 字符串类型；文字颜色,支持支持rgb、rgba、#； 默认  '#FFFFFF'
  33.         Font:14,                     //(可选项) 数字类型；字体大小； 默认  14
  34.         corner: 3,                   //(可选项)数字类型；圆角；默认：3
  35.         prdfix:'总计:',               //(可选项) 字符串类型；描述签字；默认  '值1...n:'
  36.         lineWidth:2,                 //(可选项)数字类型；线条宽度；默认：2
  37.         lineColor:'#DC143C',         //(可选项) 字符串类型；线条颜色,支持支持rgb、rgba、#； 默认  '#DC143C'
  38.         title:'第一天',               //(可选项) 字符串类型；标题； 默认：x轴对应的值
  40.     }
  43. }

fixedOn：

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

fixed:

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

callback(ret)

ret:

  • 类型：JSON对象
  • 描述：打开的曲线图id和点击事件回调；
  • 内部字段：
  1. {
  2.      id:0        //数字类型；打开曲线图的id
  3.      xvalue:'',  //字符类型；x轴的值
  4.      yvalues:[ ],//数组类型；y轴的值
  5. }

示例代码

  1. var UIChartline = api.require('UIChartline');
  2. var params = {
  3.     xTitles:['第1天','第2天','第3天','第4天','第5天','第6天','第7天','第8天','第9天','第10天','第11天','第12天','第13天','第14天'],
  4.     valuesArray:[[19,77,22,44,33,51,55,95,66,43,11,25,11,80],[43,54,32,66,77,43,45,77,33,78,29,55,66,33]],
  5.     chartLineType:0,
  6.     base:{
  7.         isdot: true,        //（可选项）布尔类型；是否显示圆点；默认值：true
  8.         dot:'#000000',      //(可选项) 字符串类型；圆点背景颜色,支持rgb、rgba、#； 默认 '#000000'
  9.         animation: true,    //（可选项）布尔类型；是否显示绘制动画；默认值：true
  10.         animationTime: 3,   //（可选项）数字类型；动画时间；默认值：1
  11.         yUnit:'%',          //(可选项) 字符串类型；y轴单位； 默认 ''
  12.     },
  13.     rect:{
  14.         x: 0,      //（可选项）数字类型；曲线图 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
  15.         y: 0,      //（可选项）数字类型；曲线图 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
  16. <!--                    w: 320,    //（可选项）数字类型；曲线图长（相对于所属的 Window 或 Frame）；默认值：所属的 Window 或 Frame的宽-->
  17.         h: 400    //（可选项）数字类型；曲线图高（相对于所属的 Window 或 Frame）；默认值：200
  19.     },
  20.     styles:{
  21.         bg:'#CCFF33',                //(可选项) 字符串类型；曲线图背景颜色； 默认 '#ffffff'
  22.         line:{                       //(可选项) JSON对象；曲线相关设置
  23.             lineBg:['#3300FF','#339900'],        //(可选项) 数组类型；曲线颜色，支持支持rgb、rgba、#；默认 '#FF0000'
  24.             lineWidth:2,            //(可选项) 数字类型；曲线宽度；默认：2
  25.         },
  26.         axis:{                       //(可选项) JSON对象；曲线相关设置
  27.             axisBg:'#FFA500',       //(可选项) 字符串类型；轴颜色，支持支持rgb、rgba、#；默认 '#FFA500'
  28.             axisWidth:2,            //(可选项) 字符串类型；轴宽度；默认：2
  29.             yLabNumber:'10',    //(可选项) 数字类型；Y轴的刻度个数； 默认 '10'
  31.         },
  32.         assistLine:{
  33.             yenable: true,      //（可选项）布尔类型；是否显示横线辅助线；默认值：true
  34.             ywidth: 1,          //（可选项）数字类型；横线辅助线宽度；默认值：1
  35.             ycolor: '#CCCCCC', //(可选项) 字符串类型；横线辅助线颜色,支持支持rgb、rgba、#； 默认 '#CCCCCC'
  36.             xenable: true,      //（可选项）布尔类型；是否显示纵线辅助线；默认值：true
  37.             xwidth: 1,          //（可选项）数字类型；横纵线辅助线宽度；默认值：1
  38.             xcolor:'#CCCCCC'  //(可选项) 字符串类型；纵线辅助线颜色,支持支持rgb、rgba、#； 默认  '#CCCCCC'
  39.         },
  40.         assistLable:{
  42.             xcoordColor:'#000000', //(可选项) 字符串类型；x轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
  43.             xlabFont:'10',    //(可选项) 数字类型；x轴字体大小； 默认 '10'
  44.             ycoordColor:'#000000', //(可选项) 字符串类型；y 轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
  45.             ylabFont:'10',    //(可选项) 数字类型；y轴字体大小； 默认 '10'
  46.             unitColor:'#000000', //(可选项) 字符串类型；单位字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
  47.             unitlabFont:'10'    //(可选项) 数字类型；单位字体大小； 默认 '10'
  48.         }
  50.     },
  51.     fixedOn:api.frameName
  52.     };
  53.     UIChartline.open(params, function(ret) {
  54.                      alert(ret.id);
  55.                      });

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

close

关闭曲线图窗口

close(params);

params

id:

  • 类型：数字类型
  • 描述：曲线图id

示例代码

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

reloadData

刷新曲线数据。

reloadData(params)

params

id:

  • 类型：数字类型
  • 描述：曲线图id

valuesArray:

  • 类型：数组类型
  • 描述：刷新曲线图数据

示例代码

  1. var UIChartline = api.require('UIChartline');
  2. var params = {
  3.        id:1,
  4.        valuesArray:[]
  5.  }
  6. UIChartline.reloadData(params);

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

show

显示曲线图窗口

show(params);

params

id:

  • 类型：数字类型
  • 描述：曲线图id

示例代码

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

hide

隐藏曲线图窗口

hide(params);

params

id:

  • 类型：数字类型
  • 描述：曲线图id

示例代码

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本