graph

来自于:官方立即使用

概述

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:

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

内部字段:

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

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象

内部字段:

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

示例代码

var graph = api.require('graph');
graph.open({
    bubbleUp: 'widget://res/graph_bubble_up.png',
    bubbleDown: 'widget://res/graph_bubble_down.png',
    data: [{
        'time': '12:05',
        'data': '15',
        'isonline': '1'
    }, {
        'time': '13:10',
        'data': '45',
        'isonline': '1'
    }, {
        'time': '14:22',
        'data': '55',
        'isonline': '1'
    }, {
        'time': '15:08',
        'data': '0',
        'isonline': '1'
    }, {
        'time': '16:19',
        'data': '70',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '45',
        'isonline': '0'
    }, {
        'time': '12:05',
        'data': '60',
        'isonline': '1'
    }, {
        'time': '13:10',
        'data': '35',
        'isonline': '1'
    }, {
        'time': '14:22',
        'data': '85',
        'isonline': '1'
    }, {
        'time': '15:08',
        'data': '20',
        'isonline': '0'
    }, {
        'time': '16:19',
        'data': '70',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '47',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '45',
        'isonline': '1'
    }]
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

补充说明

打开曲线图视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reload

刷新曲线数据

reload({params})

params

type:

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

data:

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

内部字段:

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

示例代码

var array = ;
var graph = api.require('graph');
graph.reload({
    data: [{
        'time': '12:05',
        'data': '15',
        'isonline': '1'
    }, {
        'time': '13:10',
        'data': '45',
        'isonline': '1'
    }, {
        'time': '14:22',
        'data': '55',
        'isonline': '1'
    }, {
        'time': '15:08',
        'data': '0',
        'isonline': '1'
    }, {
        'time': '16:19',
        'data': '70',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '45',
        'isonline': '0'
    }, {
        'time': '12:05',
        'data': '60',
        'isonline': '1'
    }, {
        'time': '13:10',
        'data': '35',
        'isonline': '1'
    }, {
        'time': '14:22',
        'data': '85',
        'isonline': '1'
    }, {
        'time': '15:08',
        'data': '20',
        'isonline': '0'
    }, {
        'time': '16:19',
        'data': '70',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '47',
        'isonline': '1'
    }, {
        'time': '17:31',
        'data': '45',
        'isonline': '1'
    }]
});

补充说明

刷新曲线数据

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭曲线图视图

close()

示例代码

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

补充说明

关闭曲线图视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏曲线图视图

hide()

示例代码

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

补充说明

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

可用性

iOS系统,安卓系统

可提供的1.0.1及更高版本

show

显示曲线图视图

show()

示例代码

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

补充说明

显示已隐藏的曲线图视图

可用性

iOS系统,安卓系统

可提供的1.0.1及更高版本

刷新方式

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

取值范围:

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