下载文档

uexChart(iOS版:swift编译)
更新时间:2016-04-28

1、简介

1.1、说明

该插件封装几何图表功能,包括饼状图,折线图和柱状图功能。

公告!
ios版插件暂支持公测环境编译,需获取公测权限跳转 ,具体更新到公共插件时间请关注官方通知.

1.2、UI展示

见具体API

1.3、开源源码

插件测试用例与源码下载:点击 插件中心至插件详情页 (插件测试用例与插件源码已经提供)

2、API概览

2.1、方法

openPieChart 打开饼状图

uexChart.openPieChart(json)

说明:

打开一个饼状图

参数:

  1. var json = {
  2. id:,//(必选) 唯一标识符
  3. left:,//(可选) 左间距,默认0
  4. top:,//(可选) 上间距,默认0
  5. width:,//(可选) 宽度,默认屏幕宽度
  6. height:,//(可选) 高度,默认屏幕高度
  7. bgColor:,//(可选) 背景颜色,默认透明(仅Android)
  8. showUnit:,//(可选) 是否显示单位,默认false
  9. unit:,//(可选) 单位
  10. valueTextColor:,//(可选) 饼状图上值的文本颜色,默认#ffffff
  11. valueTextSize:,//(可选) 饼状图上值的字体大小,默认13
  12. desc:,//(可选) 描述
  13. descTextColor:,//(可选) 描述及图例文本颜色,默认#000000
  14. descTextSize:,//(可选) 描述及图例字体大小,默认12
  15. showValue:,//(可选) 是否显示value,默认true
  16. showLegend:,//(可选) 是否显示图例,默认false
  17. legendPosition:,//(可选) 图例显示的位置,取值范围:bottom-饼状图下方;right-饼状图右侧,默认bottom
  18. duration:,//(可选) 显示饼状图动画时间,单位ms,默认1000
  19. isScrollWithWeb:,//(可选) 是否跟随网页滑动,默认false
  20. showTitle:,//(可选) 是否显示title,默认true
  21. showPercent:,//(可选) 是否用百分比代替value,默认true
  22. showCenter:,//(可选) 是否显示中心圆,默认true
  23. centerColor:,//(可选) 中心圆颜色,默认透明
  24. centerTitle:,//(可选) 中心标题
  25. centerSummary:,//(可选) 中心子标题
  26. centerRadius:,//(可选) 中心圆半径百分比,默认40
  27. centerTransRadius:,//(可选) 中心圆半透明部分半径,默认42
  28. data:[//(必选) 数组
  29. {
  30. title:,//(必选) 色块名称
  31. color:,//(必选) 色块颜色
  32. value://(必选) 色块值
  33. }
  34. ]
  35. }

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

示例1

  1. var param1 = {
  2. id:1,
  3. top:500,
  4. isScrollWithWeb:true,
  5. data:[
  6. {
  7. title:"title1",
  8. color:"#c12552",
  9. value:0.9
  10. },
  11. {
  12. title:"title2",
  13. color:"#ff6600",
  14. value:0.5
  15. },
  16. {
  17. title:"title3",
  18. color:"#f5c700",
  19. value:0.6
  20. },
  21. {
  22. title:"title4",
  23. color:"#6a961f",
  24. value:0.4
  25. },
  26. {
  27. title:"title5",
  28. color:"#b36435",
  29. value:0.8
  30. }
  31. ]
  32. };
  33. var data1 = JSON.stringify(param1);
  34. uexChart.openPieChart(data1);

运行效果:(网页背景色为蓝色)


示例2

  1. var param2 = {
  2. id:2,
  3. left:0,
  4. top:500,
  5. width:800,
  6. height:800,
  7. bgColor:"#cccccc",
  8. showUnit:true,
  9. unit:"cc",
  10. showCenter:true,
  11. centerColor:"#00000000",
  12. centerTitle:"我是标题!",
  13. centerSummary:"我是子标题",
  14. centerRadius:55,
  15. centerTransRadius:57,
  16. valueTextColor:"#ffffff",
  17. valueTextSize:15,
  18. desc:"测试饼状图功能",
  19. descTextColor:"#000000",
  20. descTextSize:9,
  21. showTitle:true,
  22. showValue:true,
  23. showPercent:false,
  24. showLegend:true,
  25. legendPosition:"bottom",
  26. duration:800,
  27. data:[
  28. {
  29. title:"title1",
  30. color:"#c12552",
  31. value:0.9
  32. },
  33. {
  34. title:"title2",
  35. color:"#ff6600",
  36. value:0.5
  37. },
  38. {
  39. title:"title3",
  40. color:"#f5c700",
  41. value:0.6
  42. },
  43. {
  44. title:"title4",
  45. color:"#6a961f",
  46. value:0.4
  47. },
  48. {
  49. title:"title5",
  50. color:"#b36435",
  51. value:0.8
  52. }
  53. ]
  54. };
  55. var data2 = JSON.stringify(param2);
  56. uexChart.openPieChart(data2);

运行效果:

closePieChart 关闭饼状图

uexChart.closePieChart(json)

说明:

关闭饼状图

参数:

  1. var json = []//(可选) 饼状图唯一标识符数组,不传时关闭所有饼状图

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. 示例1
  2. var params = [1];
  3. var data = JSON.stringify(params);
  4. uexChart.closePieChart(data);//关闭唯一标识符为1的饼状图
  5. 示例2
  6. uexChart.closePieChart();//关闭所有饼状图

openLineChart 打开曲线图

说明:

打开曲线图

uexChart.openLineChart(json)

参数:

  1. var json = {
  2. id:,//(必选) 唯一标识符
  3. left:,//(可选) 左间距,默认0
  4. top:,//(可选) 上间距,默认0
  5. width:,//(可选) 宽度,默认屏幕宽度
  6. height:,//(可选) 高度,默认屏幕高度
  7. bgColor:,//(可选) 背景颜色,默认透明
  8. showUnit:,//(可选) 是否显示单位,默认false
  9. unit:,//(可选) 单位
  10. valueTextColor:,//(可选) 曲线图上值的文本颜色,默认#ffffff
  11. valueTextSize:,//(可选) 曲线图上值的字体大小,默认13
  12. desc:,//(可选) 描述
  13. descTextColor:,//(可选) 描述及图例文本颜色,默认#000000
  14. descTextSize:,//(可选) 描述及图例字体大小,默认12
  15. showValue:,//(可选) 是否显示value,默认true
  16. showLegend:,//(可选) 是否显示图例,默认false
  17. legendPosition:,//(可选) 图例显示的位置,取值范围:bottom-曲线图下方;right-曲线图右侧,默认bottom
  18. duration:,//(可选) 显示曲线图动画时间,单位ms,默认1000
  19. isScrollWithWeb:,//(可选) 是否跟随网页滑动,默认false
  20. minValue,//(可选)纵坐标最小值(不填默认为传入的数据中最小的纵坐标值)
  21. maxValue,//(可选)纵坐标最大值(不填默认为传入的数据中最大的纵坐标值)
  22. borderColor:,//(可选)图表边框颜色(默认为黑)
  23. extraLines:[//(可选)辅助线数组,辅助线是一条平行于x轴的直线
  24. {
  25. yValue:,//(必选)纵坐标值,
  26. lineName,//(必选)辅助线标签名
  27. lineColor:,//(可选)辅助线颜色
  28. textColor:,//(可选)辅助线标签颜色
  29. textSize:,//(可选)辅助线标签字体大小
  30. isSolid:,//(可选)是否是实线,默认true
  31. lineWidth://(可选)辅助线宽度
  32. }
  33. ],
  34. xData:[],//(可选)横坐标数组,包含所有横坐标的值 (详见下方说明)
  35. lines:[//(必选) 曲线数组
  36. {
  37. lineName:,//(必选) 曲线名称
  38. lineColor:,//(必选) 曲线颜色
  39. lineWidth:,//(必选) 曲线线宽
  40. circleColor:,//(必选) 结点圆圈颜色
  41. circleSize:,//(必选) 结点圆圈大小
  42. isSolid:,//(可选) 是否是实线,默认true
  43. cubicIntensity:,//(可选)圆滑程度,取值0.05~1 值越大曲线越弯曲,不传时曲线为折线
  44. data:[//(必选) 数据数组
  45. {
  46. xValue:,//(必选) 横坐标值(必须是xData中包含的值,详见下方说明)
  47. yValue://(必选) 纵坐标值
  48. }
  49. ]
  50. }
  51. ],
  52. option:{
  53. initZoomX:,//Number,可选, X方向缩放系数。initZoomX为正实数 传小于1的值为缩小 大于1的值为放大
  54. initZoomY:,//Number,可选, Y方向缩放系数。initZoomY为正实数 传小于1的值为缩小 大于1的值为放大
  55. initPositionX:,//Number, 可选,X方向初始位置,单位:px。initPositionX为非负实数,默认为0
  56. initPositionY:,//Number, 可选,Y方向初始位置,单位:px。initPositionY为非负实数,默认为0
  57. isSupportDrag:,//Boolean,可选,是否支持滑动手势
  58. isSupportZoomX:,//Boolean,可选,是否响应X方向上的缩放手势
  59. isSupportZoomY://Boolean,可选,是否响应Y方向上的缩放手势
  60. }
  61. }
  • xData里的元素是在x轴上显示的文字,支持Number和String。
  • 当xData不传时,插件内部会新建一个数组,并将每一个出现过的xValue顺次添加至此数组中,并将此数组当做xData使用。
  • 传入xData时,插件不会再往其中添加新元素。此时,若数据的xValue没有出现在xData中,那么这个数据将被忽略。

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

示例1

  1. var param = {
  2. id:1,
  3. left:50,
  4. top:200,
  5. width:800,
  6. height:800,
  7. bgColor:"#00000000",
  8. showUnit:true,
  9. unit:"cc",
  10. valueTextColor:"#000000",
  11. valueTextSize:15,
  12. desc:"测试折线图功能",
  13. descTextColor:"#000000",
  14. descTextSize:12,
  15. showLegend:true,
  16. legendPosition:"bottom",
  17. duration:800,
  18. xData:[2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
  19. minValue:-3,
  20. maxValue:12,
  21. borderColor:"#ccc",
  22. extraLines:[
  23. {
  24. yValue:6.5,
  25. lineName:"及格",
  26. lineColor:"#f00",
  27. textColor:"#f00",
  28. textSize:12,
  29. isSolid:false,
  30. lineWidth:4
  31. },
  32. {
  33. yValue:8.9,
  34. lineName:"优秀",
  35. lineColor:"#0f0",
  36. textColor:"#0f0",
  37. textSize:12,
  38. isSolid:false,
  39. lineWidth:4
  40. }
  41. ],
  42. lines:[
  43. {
  44. cubicIntensity:0.2,
  45. lineName:"line1",
  46. lineColor:"#ff0000",
  47. lineWidth:2,
  48. circleColor:"#ff6600",
  49. circleSize:3,
  50. isSolid:true,
  51. data:[
  52. {xValue:2001,yValue:1.01234},
  53. {xValue:2002,yValue:3.03},
  54. {xValue:2003,yValue:2.05},
  55. {xValue:2004,yValue:4},
  56. {xValue:2005,yValue:2},
  57. {xValue:2006,yValue:3},
  58. {xValue:2007,yValue:8},
  59. {xValue:2008,yValue:10},
  60. {xValue:2009,yValue:-1.2},
  61. {xValue:2010,yValue:6}
  62. ]
  63. }
  64. ]
  65. };
  66. var data1 = JSON.stringify(param);
  67. uexChart.openLineChart(data1);

运行效果:(网页背景色为蓝色)


示例2

  1. var param = {
  2. id:2,
  3. left:0,
  4. top:400,
  5. width:800,
  6. height:800,
  7. bgColor:"#cccccc",
  8. showUnit:true,
  9. showValue:false,
  10. unit:"cc",
  11. valueTextColor:"#ffffff",
  12. valueTextSize:15,
  13. desc:"测试折线图功能",
  14. descTextColor:"#000000",
  15. descTextSize:12,
  16. showLegend:true,
  17. legendPosition:"right",
  18. duration:800,
  19. isScrollWithWeb:true,
  20. xData:[2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
  21. lines:[
  22. {
  23. lineName:"line1",
  24. lineColor:"#ff6600",
  25. lineWidth:2,
  26. circleColor:"#ff6600",
  27. circleSize:3,
  28. isSolid:true,
  29. data:[
  30. {xValue:2001,yValue:5},
  31. {xValue:2002,yValue:1},
  32. {xValue:2003,yValue:6},
  33. //{xValue:2004,yValue:4},
  34. //{xValue:2005,yValue:2},
  35. //{xValue:2006,yValue:3},
  36. {xValue:2007,yValue:8},
  37. {xValue:2008,yValue:10},
  38. {xValue:2009,yValue:2},
  39. {xValue:2010,yValue:6}
  40. ]
  41. },
  42. {
  43. lineName:"line2",
  44. lineColor:"#6a961f",
  45. lineWidth:4,
  46. circleColor:"#6a961f",
  47. circleSize:4,
  48. isSolid:false,
  49. data:[
  50. //{xValue:2001,yValue:10},
  51. //{xValue:2002,yValue:3},
  52. //{xValue:2003,yValue:3},
  53. {xValue:2004,yValue:2},
  54. {xValue:2005,yValue:8},
  55. {xValue:2006,yValue:2},
  56. {xValue:2007,yValue:5},
  57. {xValue:2008,yValue:2},
  58. {xValue:2009,yValue:5},
  59. {xValue:2010,yValue:4}
  60. ]
  61. }
  62. ]
  63. };
  64. var data1 = JSON.stringify(param);
  65. uexChart.openLineChart(data1);

运行效果:

closeLineChart 关闭曲线图

uexChart.closeLineChart(json)

说明:

关闭曲线图

参数:

  1. var json = []//(可选) 曲线图唯一标识符数组,不传时关闭所有曲线图

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. 示例1
  2. var params = [1];
  3. var data = JSON.stringify(params);
  4. uexChart.closeLineChart(data);//关闭唯一标识符为1的曲线图
  5. 示例2
  6. uexChart.closeLineChart();//关闭所有曲线图

openBarChart 打开直方图

uexChart.openBarChart(json)

说明:

打开直方图

参数:

  1. var json = {
  2. id:,//(必选) 唯一标识符
  3. left:,//(可选) 左间距,默认0
  4. top:,//(可选) 上间距,默认0
  5. width:,//(可选) 宽度,默认屏幕宽度
  6. height:,//(可选) 高度,默认屏幕高度
  7. bgColor:,//(可选) 背景颜色,默认透明
  8. showUnit:,//(可选) 是否显示单位,默认false
  9. unit:,//(可选) 单位
  10. valueTextColor:,//(可选) 直方图上值的文本颜色,默认#ffffff
  11. valueTextSize:,//(可选) 直方图上值的字体大小,默认13
  12. desc:,//(可选) 描述
  13. descTextColor:,//(可选) 描述及图例文本颜色,默认#000000
  14. descTextSize:,//(可选) 描述及图例字体大小,默认12
  15. showValue:,//(可选) 是否显示value,默认true
  16. showLegend:,//(可选) 是否显示图例,默认false
  17. legendPosition:,//(可选) 图例显示的位置,取值范围:bottom-直方图下方;right-直方图右侧,默认bottom
  18. duration:,//(可选) 显示直方图动画时间,单位ms,默认1000
  19. isScrollWithWeb:,//(可选) 是否跟随网页滑动,默认false
  20. minValue,//(可选)纵坐标最小值(不填默认为传入的数据中最小的纵坐标值)
  21. maxValue,//(可选)纵坐标最大值(不填默认为传入的数据中最大的纵坐标值)
  22. borderColor:,//(可选)图表边框颜色(默认为黑)
  23. extraLines:[//(可选)辅助线数组,辅助线是一条平行于x轴的直线
  24. {
  25. yValue:,//(必选)纵坐标值,
  26. lineName,//(必选)辅助线标签名
  27. lineColor:,//(可选)辅助线颜色
  28. textColor:,//(可选)辅助线标签颜色
  29. textSize:,//(可选)辅助线标签字体大小
  30. isSolid:,//(可选)是否是实线,默认true
  31. lineWidth:,//(可选)辅助线宽度
  32. }
  33. ],
  34. bars:[//直方数组
  35. {
  36. barName:,//(必选) 直方名称
  37. barColor:,//(必选) 直方颜色
  38. data:[//(必选) 数据数组
  39. {
  40. xValue:,//(必选) 横坐标值,(必须是xData中包含的值,详见下方说明)
  41. yValue://(必选) 纵坐标值
  42. }
  43. ]
  44. }
  45. ],
  46. option:{
  47. initZoomX:,//Number,可选, X方向缩放系数。initZoomX为正实数 传小于1的值为缩小 大于1的值为放大
  48. initZoomY:,//Number,可选, Y方向缩放系数。initZoomY为正实数 传小于1的值为缩小 大于1的值为放大
  49. initPositionX:,//Number, 可选,X方向初始位置,单位:px。initPositionX为非负实数,默认为0
  50. initPositionY:,//Number, 可选,Y方向初始位置,单位:px。initPositionY为非负实数,默认为0
  51. isSupportDrag:,//Boolean,可选,是否支持滑动手势
  52. isSupportZoomX:,//Boolean,可选,是否响应X方向上的缩放手势
  53. isSupportZoomY://Boolean,可选,是否响应Y方向上的缩放手势
  54. }
  55. }

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

示例1

  1. var param = {
  2. id:1,
  3. left:0,
  4. top:500,
  5. width:800,
  6. height:800,
  7. bgColor:"#00000000",
  8. showUnit:true,
  9. unit:"cc",
  10. valueTextColor:"#000000",
  11. valueTextSize:15,
  12. duration:1800,
  13. bars:[
  14. {
  15. barName:"bar1",
  16. barColor:"#c12552",
  17. data:[
  18. {xValue:2001,yValue:5},
  19. {xValue:2002,yValue:1},
  20. {xValue:2003,yValue:6},
  21. {xValue:2004,yValue:4},
  22. {xValue:2005,yValue:2},
  23. {xValue:2006,yValue:3}
  24. ]
  25. }
  26. ]
  27. };
  28. var data1 = JSON.stringify(param);
  29. uexChart.openBarChart(data1);

运行效果:(网页背景色为蓝色)


示例2

  1. var param = {
  2. id:2,
  3. left:10,
  4. top:700,
  5. width:800,
  6. height:800,
  7. bgColor:"#cccccc",
  8. showUnit:true,
  9. unit:"cc",
  10. valueTextColor:"#ffffff",
  11. valueTextSize:15,
  12. showValue:false,
  13. desc:"测试柱状图功能",
  14. descTextColor:"#000000",
  15. descTextSize:12,
  16. showLegend:true,
  17. legendPosition:"right",
  18. duration:1800,
  19. isScrollWithWeb:true,
  20. borderColor:"#ccc",
  21. xData:["2001","2002","2003","2004","2005","2006"],
  22. bars:[
  23. {
  24. barName:"bar1",
  25. barColor:"#c12552",
  26. data:[
  27. {xValue:2001,yValue:5},
  28. {xValue:2002,yValue:1},
  29. {xValue:2003,yValue:6},
  30. {xValue:2004,yValue:4},
  31. {xValue:2005,yValue:2},
  32. {xValue:2006,yValue:3}
  33. ]
  34. },
  35. {
  36. barName:"bar2",
  37. barColor:"#ff6600",
  38. data:[
  39. {xValue:2001,yValue:10},
  40. {xValue:2002,yValue:3},
  41. {xValue:2003,yValue:3},
  42. {xValue:2004,yValue:2},
  43. {xValue:2005,yValue:8},
  44. {xValue:2006,yValue:2}
  45. ]
  46. }
  47. ],
  48. extraLines:[
  49. {
  50. yValue:3.5,
  51. lineName:"平均值",
  52. lineColor:"#f00",
  53. textColor:"#f00",
  54. textSize:12,
  55. isSolid:false,
  56. lineWidth:4
  57. }
  58. ]
  59. };
  60. var data1 = JSON.stringify(param);
  61. uexChart.openBarChart(data1);

运行效果:

closeBarChart 关闭直方图

uexChart.closeBarChart(json)

说明:

关闭直方图

参数:

  1. var json = []//(可选) 直方图唯一标识符数组,不传时关闭所有直方图

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. 示例1
  2. var params = [1];
  3. var data = JSON.stringify(params);
  4. uexChart.closeBarChart(data);//关闭唯一标识符为1的直方图
  5. 示例2
  6. uexChart.closeBarChart();//关闭所有直方图

2.2、监听方法

onValueSelected 图表中元素被点击的监听方法

uexChart.onValueSelected(json);

说明:

图表中元素被点击的监听方法

参数:

  1. var json = {
  2. value:,//Number,被点击的元素对应的y值
  3. dataSetIndex:,//Number,被点击的元素所在的数据数组序号
  4. xIndex://Number,被点击的元素对应的x轴序号
  5. }
  • dataSetIndex和xIndex iOS 3.0.3+才支持

平台支持:

Android 2.2+
iOS 7.1+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. uexChart.onValueSelected = function(data){
  2. alert(data);
  3. }

3、更新历史

iOS

API版本:uexChart-3.0.3

最近更新时间:2015-12-21

历史发布版本 更新内容
3.0.3 openBarChart和openLineChart新增option参数;
3.0.2 使用Swift2.1编译,支持IDE本地打包
3.0.1 使用Swift2.0的库,支持Xcode7
3.0.0 几何图表插件

Android

API版本:uexChart-3.0.2

最近更新时间:2015-12-21

历史发布版本 更新内容
3.0.2 openBarChart和openLineChart新增option参数
3.0.1 替换ActivityGroup
3.0.0 几何图表插件