UILineChart

open

reloadData

close

hide

show

论坛示例

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

概述

UILineChart 插件可用于生成折线图(K线图)视图，并支持多条折线。开发者可自定义 X、Y 轴样式以及折线的个数和颜色。本插件还可监听左右拖动到头的事件，可向当前数据拼接加载、刷新等操作。同一个页面可以打开多个插件实例，以插件 id 区分。本插件是 lineChart 的优化版

图片说明

open

打开折线图视图

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

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）插件的位置及尺寸
  • 默认值：见内部字段
  • 内部字段：
{
    x: 0,                              //（可选项）数字类型；插件左上角的 X 坐标（相对于所属的 Window 或 Frame）；默认：0
    y: 0,                              //（可选项）数字类型；插件左上角的 Y 坐标（相对于所属的 Window 或 Frame）；默认：0
    w: 320,                            //（可选项）数字类型；插件的宽度；默认：所属的 Window 或 Frame 的宽度
    h: 300                             //（可选项）数字类型；插件的高度；默认：w-20
}

xAxis：

  • 类型：JSON 对象
  • 描述：折线图的 X 轴信息
  • 默认值：见内部字段
  • 内部字段：
{
    indexs: ['一月','二月','三月'],      //字符串数组类型；X 轴标注
    screenXcount: 7                      //（可选项）数字类型；X 轴标注在每屏内的显示个数；默认：7
}

yAxis：

  • 类型：JSON 对象
  • 描述：折线图的 Y 轴信息
  • 默认值：见内部字段
  • 内部字段：
{
    max: 1000,                         //数字类型；Y 轴最大值；可为负值，需要大于 min
    min: -200,                         //数字类型；Y 轴最小值；可为负值，需要小于 max
    step: 200,                         //数字类型；Y 轴刻度间隔
    base: 300                          //数字类型；基准线对应的 Y 轴坐标，当值大于 max 或小于 min 时不显示；此参数不为0时，0处坐标基线隐藏
}

datas：

  • 类型：数组类型
  • 描述：多条折线关键结点数据的数组
  • 默认值：见内部字段
  • 内部字段：
[
    [200,-100,100,0,50],               //数字数组；一条折线的结点数据数组
                                       //数组的值在绘图时会对应到 Y 轴
                                       //数据项按顺序对应 X 轴的每个结点

    [-200,100,-100,0,-50]              //（可选项）数字数组；这是另一条折线的结点数据数组
]

styles:

  • 类型：JSON 对象
  • 描述：插件视图内元素样式设置
  • 默认值：见内部字段
  • 内部字段：
{
    xAxis: {                           //（可选项）JSON 对象；X 轴样式
        bg: '#B2DFEE',                 //（可选项）字符串类型；X 轴背景，支持 rgb、rgba、#；默认:'#B2DFEE'
        markColor: '#888',             //（可选项）字符串类型；X 轴标注字体颜色，支持 rgb、rgba、#；默认:'#848484'
        markSize: 12,                  //（可选项）数字类型；X 轴标注字体大小；默认：12
    padding:20                     //（可选项）数字类型；X轴两边边距（适当调整该值可避免第一个点和最后一个点数据被遮盖显示不完整的问题），该参数仅支持Android
    },
    yAxis: {                           //（可选项）JSON 对象；Y 轴样式
        bg: '#B2DFEE',                 //（可选项）字符串类型；Y 轴背景，支持 rgb、rgba、#；默认:'#B2DFEE'
        markColor: '#888',             //（可选项）字符串类型；Y 轴标注字体颜色，支持 rgb、rgba、#；默认:'#848484'
        markSize: 12                   //（可选项）数字类型；Y 轴标注字体大小；默认：12
    },
    coordinate: {                      //（可选项）JSON 对象；坐标系样式
        bg: '#fcfcfc',                 //（可选项）字符串类型；坐标系背景，支持 rgb、rgba、#、img；默认:'#fcfcfc'
        color:'#cacaca',               //（可选项）字符串类型；坐标系网格线颜色，支持 rgb、rgba、#；默认:'#cacaca'
        baseColor:'#bbb',            //（可选项）字符串类型；坐标系基准线颜色，支持 rgb、rgba、#；默认:'#bbb'
    },
    colors:['#800080','#7FFFAA']       //（可选项）字符串类型数组；多条折线的颜色，支持 rgb、rgba、#；默认:['#cb3d1b','#f6a800','#fff100','#00a13f','#007db0','#142a8c','#a51466']
                                       //显示时将按照 datas 内对应的顺序设置颜色
}

fixedOn：

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

fixed:

  • 类型：布尔
  • 描述：（可选项）插件是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    id: 1,                             //数字类型；插件的 id，用于区分插件的多个实例
    eventType: 'show',                 //字符串类型；交互事件类型
                                       //取值范围：
                                       //show（打开插件成功）
                                       //click（折线图结点的点击事件）

    lineIndex: 0,                      //数字类型；所点击结点所在折线在 datas 中的索引；当 eventType 为 click 时有效
    nodeIndex: 0,                      //数字类型；所点击结点所在折线数据数组中的索引；当 eventType 为 click 时有效
    value: 100                         //数字类型；所点击结点对应的 Y 轴的值；当 eventType 为 click 时有效
}

示例代码

var UILineChart = api.require('UILineChart');
UILineChart.open({
    rect: {
        x: 0,
        y: 64,
        w: 320,
        h: 300
    },
    xAxis: {
        indexs: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月'],
        screenXcount: 7
    },
    yAxis: {
        max: 1000,
        min: -1000,
        step: 200,
        base: 0
    },
    datas: [
        [200, -100, 100, 0, 50],
        [-200, 100, -100, 0, -50]
    ],
    styles: {
        xAxis: {
            bg: '#b2dfee',
            markColor: '#888',
            markSize: 12
        },
        yAxis: {
            bg: '#b2dfee',
            markColor: '#888',
            markSize: 12
        },
        coordinate: {
            bg: '#fcfcfc',
            color: '#cacaca',
            baseColor: 'bbb',
        },
        colors: ['#800080', '#7FFFAA']
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

重新加载数据

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

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

lineIndexs：

  • 类型：数字数组
  • 描述：需要更新的折线索引数组，索引对应 open 函数中设置的参数 datas 的索引值
  • 默认值：从 0 到 datas.length 的整数数组

datas：

  • 类型：数字数组
  • 描述：要更新的数据数组
  • 内部字段：
[
    [200,-100,100,0,50],               //数字数组；一条折线的结点数据数组
                                       //数组的值在绘图时会对应到 Y 轴
                                       //数据项按顺序对应 X 轴的每个结点

    [-200,100,-100,0,-50]              //数字数组；这是另一条折线的结点数据数组
]

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status: true                       //布尔类型；数据源是否刷新成功， true|false
}

示例代码

var UILineChart = api.require('UILineChart');
UILineChart.reloadData({
    id: 1,
    lineIndexs: [0, 1],
    datas: [
        [200, -100, 100, 0, 50],
        [-200, 100, -100, 0, -50]
    ]
}, function(ret) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭折线图

close({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UILineChart = api.require('UILineChart');
UILineChart.close({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏折线图视图

hide({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UILineChart = api.require('UILineChart');
UILineChart.hide({
    id: 1
});

补充说明

隐藏已显示的折线图视图，并没有从内存里清除

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的折线图视图

show({params})

params

id：

  • 类型：数字
  • 描述：插件的 id，用于区分插件的多个实例

示例代码

var UILineChart = api.require('UILineChart');
UILineChart.show({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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

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