graph

[open](#1)

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：

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

内部字段：

[{
    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) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: 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及更高版本

[刷新方式](#1)

刷新方式

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

##取值范围：

  • append_left //往左边拼接数据
  • append_right //往右边拼接数据
  • reload_all //刷新整条曲线的数据
是否仍需要帮助？ 请保持联络！
最后更新于 2023/02/27