divisionalLineChart

来自于:开发者立即使用

open reloadData updateShadow close hide show

论坛示例

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

概述

divisionalLineChart模块封装了一个折线图视图,开发者可自定义其样式,可刷新数据,左右拖动查看不同的数据,并且能响应用户点击结点的事件。目前暂仅支持绘制单条折线,由于本模块是由第三方模块开发者提供,使用本模块需在线云编译安装包。

实例截图如下:

图片说明

open

打开折线图视图

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
  4. w: 320, //(可选项)数字类型;模块的宽度,支持auto;默认:auto
  5. h: 200 //(可选项)数字类型;模块的高度,支持auto;默认:w * 2.0/3.0
  6. }

bg:

  • 类型:字符串

  • 描述:(可选项)模块背景色,支持rgb、rgba、#。

  • 描述:(可选项)模块背景色,支持rgb、rgba、#

  • 默认值:#4A708B

coordinate:

  • 类型:JSON 对象
  • 描述:(可选项)折线图的坐标系配置
  • 内部字段:
  1. {
  2. yAxis: { //(可选项)JSON 对象;y 轴配置
  3. max: 120, //(可选项)数字类型;y 轴最大值;默认:120
  4. min: 60, //(可选项)数字类型;y 轴最小值;默认:60
  5. step: 10, //(可选项)数字类型;y 轴刻度间隔;默认:10
  6. width: 30, //(可选项)数字类型;y 轴区域宽度;默认:30
  7. size: 12 , //(可选项)数字类型;y 轴标注字体大小;默认:12
  8. color: '#fff' //(可选项)字符串类型;y轴标注字体颜色;默认:#fff
  9. },
  10. xAxis: { //(可选项)JSON 对象;x 轴配置
  11. step: 10, //(可选项)数字类型;x 轴刻度间隔;默认:10
  12. minStep: 1, //(可选项)数字类型;x 轴最小刻度间隔;默认:1
  13. minStepGap: 7, //(可选项)数字类型;x 轴最小刻度间隔反应到屏幕上的间距;默认:7(单位同 rect 中的数字相同)
  14. height: 30, //(可选项)数字类型;x 轴区域的高度;默认:30
  15. size: 12 , //(可选项)数字类型;x 轴标注字体大小;默认:12
  16. color: '#fff' //(可选项)字符串类型;x轴标注字体颜色;默认:#fff
  17. },
  18. border: { //(可选项)JSON 对象;坐标系线配置
  19. size: 0.5, //(可选项)数字类型;坐标系线粗细;默认:0.5
  20. color: '#fff' //(可选项)字符串类型;坐标系颜色,支持rgb、rgba、#;默认:#fff
  21. },
  22. brokenLine: { //(可选项)JSON对象;折现样式配置
  23. color: '#fff', //(可选项)字符串类型;折线颜色,支持 rgb,rgba,#;默认:#fff
  24. width: 1.5 //(可选项)数字类型;折线粗细;默认:1.5
  25. }
  26. }

注意:

在 y 轴上每段 step 的距离 = (模块总高度 - x 轴区域高度 - 最顶端的那横轴距离模块最顶端的间距) / step 总数;其中,最顶端的那横轴距离模块最顶端的间距同 y 轴标注字体大小。

shadow:

  • 类型:数组对象
  • 描述:(可选项)阴影内容样式配置信息组成的数组
  • 内部字段:
  1. [{
  2. color: '#9AFF9A', //(可选项)字符串类型;阴影颜色,支持 rgb、rgba、#;默认:#9AFF9A
  3. xAxis: { //JSON对象;阴影区域在x轴上的区间
  4. min: 0, //数字类型;最小值
  5. max: 1.5 //数字类型;最大值
  6. },
  7. yAxis: { //JSON对象;阴影区域在 y 轴上的区间
  8. min: 72, //数字类型;最小值
  9. max: 110 //数字类型;最大值
  10. },
  11. dash: { //JSON对象;阴影区域两边分割虚线配置
  12. color:'#fff', //字符串类型;分割虚线颜色,支持 rgb、rgba、#;默认:#fff
  13. },
  14. title: { //JSON对象;阴影区域标题配置
  15. text: '开始阶段', //字符串类型;标题文本
  16. color: '#fff', //字符串类型;标题文本字体颜色,支持 rgb、rgba、#;默认:#ff
  17. size: 13 //数字类型;标题文本字体大小;默认:13
  18. }
  19. }]

data:

  • 类型:数组对象
  • 描述:折线的数据信息
  • 内部字段:
  1. [{
  2. xValue: 4, //数字类型;结点位置数据对应在 x 轴上的位置
  3. yValue: 95 //数字类型;结点位置数据对应在 y 轴上的位置
  4. },{
  5. xValue: 7.5, //数字类型;结点位置数据对应在 x 轴上的位置
  6. yValue: 88 //数字类型;结点位置数据对应在 y 轴上的位置
  7. },{
  8. xValue: 9.5, //数字类型;结点位置数据对应在 x 轴上的位置
  9. yValue: 115 //数字类型;结点位置数据对应在 y 轴上的位置
  10. }]

fixedOn:

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

fixed:

  • 类型:布尔
  • 默认值:true
  • 描述:是否将模块视图固定到窗口上,不跟随窗口上下滚动,可为空

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. id: 1, //数字类型;打开的折线图视图的 id
  3. eventType:'' //字符串类型;交互事件类型,取值范围如下:
  4. //scrollLeft:滚动到左边并超出一定阈值的事件
  5. //scrollRight:滚动到右边并超出一定阈值的事件
  6. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.open({
  3. rect: {
  4. x: 0,
  5. y: 0,
  6. w: 320,
  7. h: 220
  8. },
  9. bg: '#4A708B',
  10. coordinate:{
  11. yAxis: {
  12. max: 120,
  13. min: 60,
  14. step: 10,
  15. width: 30,
  16. size: 12 ,
  17. color: '#fff'
  18. },
  19. xAxis: {
  20. step: 10,
  21. minStep: 1,
  22. minStepGap: 7,
  23. height: 30,
  24. size: 12 ,
  25. color: '#fff'
  26. },
  27. border: {
  28. size: 0.5,
  29. color: '#fff'
  30. },
  31. brokenLine: {
  32. color: '#fff',
  33. width: 1.5
  34. }
  35. },
  36. shadow: [{
  37. color: '#9AFF9A',
  38. xAxis: {
  39. min: 6,
  40. max: 14
  41. },
  42. yAxis: {
  43. min: 72,
  44. max: 102
  45. },
  46. dash: {
  47. color: '#f00'
  48. },
  49. title: {
  50. text: '准备阶段',
  51. color: '#fff',
  52. size: 13
  53. }
  54. },{
  55. color: '#9AFF9A',
  56. xAxis: {
  57. min: 14,
  58. max: 34
  59. },
  60. yAxis: {
  61. min: 75,
  62. max: 100
  63. },
  64. dash: {
  65. color: '#fff',
  66. size: 0.5
  67. },
  68. title: {
  69. text: '基本阶段',
  70. color: '#fff',
  71. size: 13
  72. }
  73. },{
  74. color: '#9AFF9A',
  75. xAxis: {
  76. min: 34,
  77. max: 45
  78. },
  79. yAxis: {
  80. min: 85,
  81. max: 105
  82. },
  83. dash: {
  84. color: '#fff',
  85. size: 0.5
  86. },
  87. }],
  88. datas: [{
  89. xValue: 4, //数字类型;结点位置数据对应在 x 轴上的位置
  90. yValue: 95 //数字类型;结点位置数据对应在 y 轴上的位置
  91. },{
  92. xValue: 7.5, //数字类型;结点位置数据对应在 x 轴上的位置
  93. yValue: 88 //数字类型;结点位置数据对应在 y 轴上的位置
  94. },{
  95. xValue: 9.5, //数字类型;结点位置数据对应在 x 轴上的位置
  96. yValue: 115 //数字类型;结点位置数据对应在 y 轴上的位置
  97. }]
  98. }, function(ret) {
  99. if (ret) {
  100. api.alert({
  101. msg: JSON.stringify(ret)
  102. });
  103. }
  104. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新指定 id 的折线数据

reloadData({params}, callback(ret))

params

id:

  • 类型:数字
  • 描述:要刷新的模块的 id

type:

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

data:

  • 类型:数组对象
  • 描述:折线的数据信息
  • 内部字段:
  1. [{
  2. xValue: 4, //数字类型;结点位置数据对应在 x 轴上的位置
  3. yValue: 95 //数字类型;结点位置数据对应在 y 轴上的位置
  4. },{
  5. xValue: 7.5, //数字类型;结点位置数据对应在 x 轴上的位置
  6. yValue: 88 //数字类型;结点位置数据对应在 y 轴上的位置
  7. },{
  8. xValue: 9.5, //数字类型;结点位置数据对应在 x 轴上的位置
  9. yValue: 115 //数字类型;结点位置数据对应在 y 轴上的位置
  10. }]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //布尔类型;操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.reloadData({
  3. id: 1,
  4. type:'updateAll',
  5. datas: [{
  6. xValue: 4,
  7. yValue: 95
  8. },{
  9. xValue: 7.5,
  10. yValue: 88
  11. },{
  12. xValue: 9.5,
  13. yValue: 115
  14. },{
  15. xValue: 13,
  16. yValue: 111
  17. },{
  18. xValue: 16,
  19. yValue: 88
  20. },{
  21. xValue: 18,
  22. yValue: 115
  23. }]
  24. }, function(ret) {
  25. if (ret.status) {
  26. api.alert({
  27. msg: '刷新数据成功'
  28. });
  29. }
  30. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateShadow

更新阴影区域

updateShadow({params}, callback(ret))

params

id:

  • 类型:数字
  • 描述:要更新阴影的模块的 id

shadow:

  • 类型:数组对象
  • 描述:(可选项)阴影内容样式配置信息
  • 内部字段:
  1. [{
  2. color: '#9AFF9A', //(可选项)字符串类型;阴影颜色,支持 rgb、rgba、#;默认:#9AFF9A
  3. xAxis: { //JSON对象;阴影区域在x轴上的区间
  4. min: 0, //数字类型;最小值
  5. max: 1.5 //数字类型;最大值
  6. },
  7. yAxis: { //JSON对象;阴影区域在 y 轴上的区间
  8. min: 72, //数字类型;最小值
  9. max: 110 //数字类型;最大值
  10. },
  11. dash: { //JSON对象;阴影区域两边分割虚线配置
  12. color:'#fff', //字符串类型;分割虚线颜色,支持 rgb、rgba、#;默认:#fff
  13. },
  14. title: { //JSON对象;阴影区域标题配置
  15. text: '开始阶段', //字符串类型;标题文本
  16. color: '#fff', //字符串类型;标题文本字体颜色,支持 rgb、rgba、#;默认:#ff
  17. size: 13 //数字类型;标题文本字体大小;默认:13
  18. }
  19. }]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //布尔类型;操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.updateShadow({
  3. id: 1,
  4. shadow: [{
  5. color: '#9AFF9A',
  6. xAxis: {
  7. min: 0,
  8. max: 1.5
  9. },
  10. yAxis: {
  11. min: 72,
  12. max: 110
  13. },
  14. dash: {
  15. color:'#fff'
  16. },
  17. title: {
  18. text: '开始阶段',
  19. color: '#fff',
  20. size: 13
  21. }
  22. }]
  23. }, function(ret) {
  24. if (ret.status) {
  25. api.alert({
  26. msg: '刷新阴影区域成功'
  27. });
  28. }
  29. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭折线图视图,并从内存里清除

close({params}, callback(ret))

params

id:

  • 类型:数字
  • 描述:要关闭的模块的 id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //布尔类型;操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.close({
  3. id:1
  4. },function(ret) {
  5. if (ret.status) {
  6. api.alert({
  7. msg: '关闭成功'
  8. });
  9. }
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏折线图视图,并未从内存清除,可调用 show 接口显示该模块

hide ({params}callback(ret))

params

id:

  • 类型:数字
  • 描述:要隐藏的模块的 id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //布尔类型;操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.hide(function(ret) {
  3. id:1
  4. },function(ret) {
  5. if (ret.status) {
  6. api.alert({
  7. msg: '隐藏成功'
  8. });
  9. }
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的折线图模块

show ({params}callback(ret))

params

id:

  • 类型:数字
  • 描述:要显示的模块的 id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status:true //布尔类型;操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.show( {
  3. id:1
  4. },function(ret) {
  5. if (ret.status) {
  6. api.alert({
  7. msg: '显示成功'
  8. });
  9. }
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本