brokenLine

open

reloadData

appendData

close

hide

show

论坛示例

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

概述

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

图片说明

open

打开折线图视图

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

params

x：

  • 类型：数字
  • 默认值： 0
  • 描述：插件视图左上角点的坐标，可为空

y：

  • 类型：数字
  • 默认值：0
  • 描述：插件视图左上角点的坐标，可为空

w：

  • 类型：数字
  • 默认值：当前设备屏幕的宽
  • 描述：插件视图左上角点的宽，可为空

h：

  • 类型：数字
  • 默认值：w-60
  • 描述：插件视图左上角点的高，可为空

bg：

  • 类型：字符串
  • 默认值：#BFEFFF
  • 描述：背景色，支持grb，rgba，img，#，可为空

shadowColor：

  • 类型：字符串
  • 默认值：#CAE1FF
  • 描述：折线覆盖的阴影区域的颜色，支持grb，rgba，#，可为空

xAxisGap：

  • 类型：数字类型
  • 默认值：w/7
  • 描述：x轴标记间隔距离，可为空

yAxis：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：K线图坐标系y轴配置参数，可为空
  • 内部字段：
{
    max：			//y轴最大值，数字类型，默认10000，可为空
    min：			//y轴最小值，数字类型,不可小于0，默认2000，可为空
    step：          //Y轴步幅，数字类型，默认2000，可为空
}

mark：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：标注的配置，可为空

内部字段：

{
    colorX: 	//X轴标注的字体颜色，支持 rgb，rgba，#，默认696969，可为空
    sizeX： 		//X轴标注的字体大小，数字类型，默认13，可为空
    colorY: 	//Y轴标注的字体颜色，支持 rgb，rgba，#，默认696969，可为空
    sizeY： 		//Y轴标注的字体大小，数字类型，默认13，可为空
    dot:    	//josn对象，圆点标注配置，可为空

    内部字段：

    {
    markX:     //圆点x轴标注，字符串，默认日期，可为空
    markY:     //圆点y轴标注，字符串，默认字数，可为空
    colorX:    //圆点x标注颜色，支持 rgb，rgba，#，默认696969，可为空
    colorY:    //圆点y标注颜色，支持 rgb，rgba，#，默认696969，可为空
    sizeX:     //圆点x标注大小，，默认11，可为空
    sizeY:     //圆点y标注大小，默认11，可为空
    }
}

coordLine：

  • 类型：字符串
  • 默认值：见内部字段
  • 描述：坐标线的配置，可为空

内部字段:

{
    color://坐标线颜色,字符串类型，支持 rgb，rgba，#，默认#696969，可为空
    width: //坐标线粗细，数字类型，默认1.0，可为空
    style：    //坐标线类型，dash，solid，默认dash，可为空
}

brokenLine：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：折线的配置，可为空

内部字段：

{
    color://折线颜色,字符串类型，支持 rgb，rgba，#，默认#436eee，可为空
    width: //折线粗细，数字类型，默认2.0，可为空
}

node：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：结点的配置，可为空

内部字段:

{
    size:  //结点大小，数字类型，默认5.0，可为空
    color：//结点颜色，字符串类型，支持 rgb，rgba，#，默认#436eee，可为空
    showBubble: //布尔类型，是否显示点击结点时候的气泡，默认true，可为空
    bubbleBg://气泡背景,字符串类型,支持 rgb，rgba，#，img，默认#436eee，可为空
    textColor://气泡字体颜色,字符串类型，支持 rgb，rgba，#，默认#436eee，可为空
    textSize://气泡文字大小，数字类型，默认13.0，可为空
    hollow：  //布尔类型，是否为空心圆，默认true，可为空
}

datas：

  • 类型：数组对象
  • 默认值：无
  • 描述：折线的数据信息，可为空

内部字段：

[{	
    mark:     //x轴标注，字符串类型，不可为空
    value:    //标注对应的值，数字类型，在min和max之间，不可为空
}]

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：是否将插件视图固定到窗口上，不跟随窗口上下滚动，可为空

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    id:         //打开的折线图视图的id
    eventType:  //事件类型，取值范围，nodeClick，scrollLeft，scrollRight
    index：		//点击结点的下标，仅当eventType为nodeClick时有值
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.open({
    datas: [{
        mark: 1,
        value: 2500
    }, {
        mark: 2,
        value: 3500
    }, {
        mark: 3,
        value: 4500
    }, {
        mark: 4,
        value: 3500
    }, {
        mark: 5,
        value: 7500
    }, {
        mark: 6,
        value: 6500
    }, {
        mark: 7,
        value: 4500
    }, {
        mark: 8,
        value: 5500
    }, {
        mark: 9,
        value: 3500
    }, {
        mark: 10,
        value: 3000
    }]
}, function(ret, err) {
    if (ret.eventType) {
        api.alert({
            msg: ret.eventType
        });
    }
});

补充说明

打开线图列表并显示数据

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新指定title的折线数据

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

params

datas：

  • 类型：数组对象
  • 默认值：无
  • 描述：折线的数据信息，可为空

内部字段：

[{	
    mark:     //x轴标注，字符串类型，不可为空
    value:    //标注对应的值，数字类型，在min和max之间，不可为空
}]

id：

  • 类型：数字
  • 默认值：无
  • 描述：操作视图的id，不可为空

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    status:true           //操作成功状态值
}

err：

  • 类型：JSON 对象

内部字段：

{
    msg:””//错误描述
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.reloadData({
    id: 1,
    datas: [{
        mark: 1,
        value: 3500
    }, {
        mark: 2,
        value: 2500
    }, {
        mark: 3,
        value: 5500
    }, {
        mark: 4,
        value: 3500
    }, {
        mark: 5,
        value: 6500
    }, {
        mark: 6,
        value: 4500
    }, {
        mark: 7,
        value: 8500
    }, {
        mark: 8,
        value: 7500
    }, {
        mark: 9,
        value: 9500
    }, {
        mark: 10,
        value: 5000
    }]
}, function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: '刷新数据成功'
        });
    } else {
        api.alert({
            msg: err.msg
        });
    }
});

补充说明

刷新指定title的折线的数据

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

appendData

往现有数据拼接新数据

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

params

orientation：

  • 类型：字符串
  • 默认值：right
  • 描述：拼接数据的方向，取值范围right，left，可为空

datas：

  • 类型：数组对象
  • 默认值：无
  • 描述：折线的数据信息，可为空

内部字段：

[{	
    mark:     //x轴标注，字符串类型，不可为空
    value:    //标注对应的值，数字类型，在min和max之间，不可为空
}]

id：

  • 类型：数字
  • 默认值：无
  • 描述：操作视图的id，不可为空

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    status:true           //操作成功状态值
}

err：

  • 类型：JSON 对象

内部字段：

{
    msg:””//错误描述
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.appendData({
    id: 1,
    datas: [{
        mark: 11,
        value: 3500
    }, {
        mark: 12,
        value: 2500
    }, {
        mark: 13,
        value: 5500
    }, {
        mark: 14,
        value: 3500
    }, {
        mark: 15,
        value: 6500
    }, {
        mark: 16,
        value: 4500
    }, {
        mark: 17,
        value: 8500
    }, {
        mark: 18,
        value: 7500
    }, {
        mark: 19,
        value: 9500
    }]
}, function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: '拼接数据成功'
        });
    } else {
        api.alert({
            msg: err.msg
        });
    }
});

补充说明

刷新指定title的折线的数据

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭折线图视图

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

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：操作视图的id，可为空，若为空则关闭所有

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    status:true           //操作成功状态值
}

err：

  • 类型：JSON 对象

内部字段：

{
    msg:“”//错误描述
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.close(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: '关闭成功'
        });
    } else {
        api.alert({
            msg: 'error'
        });
    }
});

补充说明

关闭折线图视图，并从内存里清空

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏折线图视图

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

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：操作视图的id，可为空，若为空则隐藏所有

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    status:true           //操作成功状态值
}

err：

  • 类型：JSON 对象

内部字段：

{
    msg:“”             //错误描述
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.hide(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: '隐藏成功'
        });
    } else {
        api.alert({
            msg: 'error'
        });
    }
});

补充说明

隐藏折线图视图，并没有从内存里清空

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示折线图视图

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

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：操作视图的id，可为空，若为空则显示所有

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

{
    status:true           //操作成功状态值
}

err：

  • 类型：JSON 对象

内部字段：

{
    msg:“”             //错误描述
}

示例代码

var brokenLine = api.require('brokenLine');
brokenLine.show(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: '隐藏成功'
        });
    } else {
        api.alert({
            msg: 'error'
        });
    }
});

补充说明

显示已隐藏的折线图视图

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24