graph

来自于:官方立即使用

open reload close show hide

概述

graph 底层通过复杂的逻辑和代码实现了一个贝塞尔曲线。可接受用户点击结点事件,开发者可自定义背景、线条、坐标系等等相关 ui 元素的样式和数据源。功能全面,性能强劲。UIGraph 模块是 graph 模块的优化版,建议使用 UIGraph 模块,此模块已停止更新。

图片说明

open

打开曲线图视图

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

params

x:

  • 类型:数字
  • 默认值:15
  • 描述:曲线图左上角点坐标,可为空

y:

  • 类型:数字
  • 默认值:64
  • 描述:曲线图左上角点坐标,可为空

w:

  • 类型:数字
  • 默认值:当前设备屏幕宽减 30
  • 描述:曲线图视图的宽,可为空

h:

  • 类型:数字
  • 默认值:当前设备屏幕的宽减 170
  • 描述:曲线图视图的高,可为空

bgColor:

  • 类型:字符串
  • 默认值:#FFFFFF
  • 描述:曲线图视图的背景色,支持 rgb,rgba,#,可为空

coordColor:

  • 类型:字符串
  • 默认值:#A9A9A9
  • 描述:曲线图视图的坐标系颜色,支持 rgb,rgba,#,可为空

markColor:

  • 类型:字符串
  • 默认值:#000000
  • 描述:曲线图视图的坐标系标注颜色,支持 rgb,rgba,#,可为空

lineColor:

  • 类型:字符串
  • 默认值:#1E90FF
  • 描述:曲线颜色,支持 rgb,rgba,#,可为空

bubbleUp:

  • 类型:字符串
  • 默认值:无
  • 描述:点击结点弹出下气泡的背景图,可为空

bubbleDown:

  • 类型:字符串
  • 默认值:无
  • 描述:点击结点弹出上气泡的背景图,可为空

data:

  • 类型:数组
  • 默认值:无
  • 描述:曲线数据,不可为空

内部字段:

  1. [{
  2. time: '15:00', //时间点
  3. data: '50', // 数据
  4. isonline: '1' //保留使用
  5. }]

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象

内部字段:

  1. {
  2. orient: //用户拖动曲线到头(向左或向右或缩小曲线)返回拖动事件,其值分别为:left,right,narrow
  3. }

示例代码

  1. var graph = api.require('graph');
  2. graph.open({
  3. bubbleUp: 'widget://res/graph_bubble_up.png',
  4. bubbleDown: 'widget://res/graph_bubble_down.png',
  5. data: [{
  6. 'time': '12:05',
  7. 'data': '15',
  8. 'isonline': '1'
  9. }, {
  10. 'time': '13:10',
  11. 'data': '45',
  12. 'isonline': '1'
  13. }, {
  14. 'time': '14:22',
  15. 'data': '55',
  16. 'isonline': '1'
  17. }, {
  18. 'time': '15:08',
  19. 'data': '0',
  20. 'isonline': '1'
  21. }, {
  22. 'time': '16:19',
  23. 'data': '70',
  24. 'isonline': '1'
  25. }, {
  26. 'time': '17:31',
  27. 'data': '45',
  28. 'isonline': '0'
  29. }, {
  30. 'time': '12:05',
  31. 'data': '60',
  32. 'isonline': '1'
  33. }, {
  34. 'time': '13:10',
  35. 'data': '35',
  36. 'isonline': '1'
  37. }, {
  38. 'time': '14:22',
  39. 'data': '85',
  40. 'isonline': '1'
  41. }, {
  42. 'time': '15:08',
  43. 'data': '20',
  44. 'isonline': '0'
  45. }, {
  46. 'time': '16:19',
  47. 'data': '70',
  48. 'isonline': '1'
  49. }, {
  50. 'time': '17:31',
  51. 'data': '47',
  52. 'isonline': '1'
  53. }, {
  54. 'time': '17:31',
  55. 'data': '45',
  56. 'isonline': '1'
  57. }]
  58. }, function(ret, err) {
  59. if (ret) {
  60. alert(JSON.stringify(ret));
  61. } else {
  62. alert(JSON.stringify(err));
  63. }
  64. });

补充说明

打开曲线图视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reload

刷新曲线数据

reload({params})

params

type:

  • 类型:字符串类型
  • 默认值:reload_all
  • 描述:刷新方式:取值范围详见刷新方式

data:

  • 类型:数组
  • 默认值:无
  • 描述:要刷新的数据,不可为空

内部字段:

  1. [{
  2. time: '15:00', //时间点,x轴标记,字符串,不可为空
  3. data: 50, // 数据,数字类型,不可为空
  4. isonline: '1' //保留使用
  5. }]

示例代码

  1. var array = ;
  2. var graph = api.require('graph');
  3. graph.reload({
  4. data: [{
  5. 'time': '12:05',
  6. 'data': '15',
  7. 'isonline': '1'
  8. }, {
  9. 'time': '13:10',
  10. 'data': '45',
  11. 'isonline': '1'
  12. }, {
  13. 'time': '14:22',
  14. 'data': '55',
  15. 'isonline': '1'
  16. }, {
  17. 'time': '15:08',
  18. 'data': '0',
  19. 'isonline': '1'
  20. }, {
  21. 'time': '16:19',
  22. 'data': '70',
  23. 'isonline': '1'
  24. }, {
  25. 'time': '17:31',
  26. 'data': '45',
  27. 'isonline': '0'
  28. }, {
  29. 'time': '12:05',
  30. 'data': '60',
  31. 'isonline': '1'
  32. }, {
  33. 'time': '13:10',
  34. 'data': '35',
  35. 'isonline': '1'
  36. }, {
  37. 'time': '14:22',
  38. 'data': '85',
  39. 'isonline': '1'
  40. }, {
  41. 'time': '15:08',
  42. 'data': '20',
  43. 'isonline': '0'
  44. }, {
  45. 'time': '16:19',
  46. 'data': '70',
  47. 'isonline': '1'
  48. }, {
  49. 'time': '17:31',
  50. 'data': '47',
  51. 'isonline': '1'
  52. }, {
  53. 'time': '17:31',
  54. 'data': '45',
  55. 'isonline': '1'
  56. }]
  57. });

补充说明

刷新曲线数据

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭曲线图视图

close()

示例代码

  1. var graph = api.require('graph');
  2. graph.close();

补充说明

关闭曲线图视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏曲线图视图

hide()

示例代码

  1. var graph = api.require('graph');
  2. graph.hide();

补充说明

隐藏曲线图视图,并没有从内存清空

可用性

iOS系统,安卓系统

可提供的1.0.1及更高版本

show

显示曲线图视图

show()

示例代码

  1. var graph = api.require('graph');
  2. graph.show();

补充说明

显示已隐藏的曲线图视图

可用性

iOS系统,安卓系统

可提供的1.0.1及更高版本

刷新方式

刷新方式

刷新数据的方式,字符串类型

取值范围:

  • append_left //往左边拼接数据
  • append_right //往右边拼接数据
  • reload_all //刷新整条曲线的数据