UILineChart

论坛示例

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

概述

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

open

打开折线图视图

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

rect：

类型：JSON 对象
描述：（可选项）模块的位置及尺寸
默认值：见内部字段
内部字段：

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 时不显示
}

datas：

类型：数组类型
描述：多条折线关键结点数据的数组
默认值：见内部字段
内部字段：

[
    [200,-100,100,0,50],               //数字数组；一条折线的结点数据数组
                                       //数组的值在绘图时会对应到 Y 轴
                                       //数据项按顺序对应 X 轴的每个结点
]

styles:

类型：JSON 对象
描述：模块视图内元素样式设置
默认值：见内部字段
内部字段：

fixedOn：

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

fixed:

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

callback(ret, err)

类型：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: {
            color: '#cacaca',
            baseColor: 'bbb',
        },
        colors: ['#800080', '#7FFFAA']
    },
    fixedOn: api.frameName,
    fixed: false
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(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 对象
内部字段：

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) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭折线图

close({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

示例代码

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

可用性

可提供的1.0.0及更高版本

hide

隐藏折线图视图

hide({params})

params

id：

类型：数字
描述：模块的 id，用于区分模块的多个实例

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

补充说明

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的折线图视图

show({params})

params

id：

描述：模块的 id，用于区分模块的多个实例

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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