open

UIChartline

close show

概述

UIChartline是一个将用户数据绘制成曲线图的模块，线条有曲线折线两种选择，可以绘制多条，并且可以根据手势方法缩小与滑动查看，开发者可以自定义线条宽度、颜色，是否显示圆点和圆点颜色，x轴y轴的数据类型和轴线颜色以及背景颜色

open

打开曲线图

open(params)

xTitles:

类型：数组类型
描述：x轴数据

valuesArray:

类型：数组类型(二维数组表示多条曲线)
描述：曲线图数据,传入绘制曲线图

chartLineType:

类型：数字类型
描述：(可选项）线条类型，0为曲线，1为折线
默认：0

base:

类型：JSON对象
描述：(可选项）曲线图相关配置

rect:

类型：JSON对象
描述：(可选项）曲线图大小及坐标


      x: 0,      //（可选项）数字类型；曲线图 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
      y: 0,      //（可选项）数字类型；曲线图 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
      w: 320,    //（可选项）数字类型；支持设置'auto'；曲线图长（相对于所属的 Window 或 Frame）；默认值：所属的 Window 或 Frame的宽
      h: 200,    //（可选项）数字类型；支持设置'auto'；曲线图高（相对于所属的 Window 或 Frame）；默认值：200
}

styles:

类型：JSON对象
描述：(可选项）模块样式配置

{
    bg:'#CCFF33',                //(可选项) 字符串类型；曲线图背景颜色； 默认 '#ffffff'
    line:{                       //(可选项) JSON对象；曲线相关设置
        lineBg:['#3300FF','#339900'],        //(可选项) 数组类型；曲线颜色，支持支持rgb、rgba、#；默认 '#FF0000'
        lineWidth:2,            //(可选项) 数字类型；曲线宽度；默认：2
    },
    axis:{                       //(可选项) JSON对象；曲线相关设置
        axisBg:'#FFA500',       //(可选项) 字符串类型；轴颜色，支持支持rgb、rgba、#；默认 '#FFA500'
        axisWidth:2,            //(可选项) 字符串类型；轴宽度；默认：2
        yLabNumber:10,    //(可选项) 数字类型；Y轴的刻度个数； 默认 '10'（android不支持）
    },
    assistLine:{
        yenable: true,      //（可选项）布尔类型；是否显示横线辅助线；默认值：true
        ycolor: '#CCCCCC', //(可选项) 字符串类型；横线辅助线颜色,支持支持rgb、rgba、#； 默认 '#CCCCCC'
        xenable: true,      //（可选项）布尔类型；是否显示纵线辅助线；默认值：true
        xwidth: 1,          //（可选项）数字类型；横纵线辅助线宽度；默认值：1
        xcolor:'#CCCCCC'  //(可选项) 字符串类型；纵线辅助线颜色,支持支持rgb、rgba、#； 默认  '#CCCCCC'
    },
    assistLable:{
        xcoordColor:'#000000', //(可选项) 字符串类型；x轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
        xlabFont:10,    //(可选项) 数字类型；x轴字体大小； 默认 10
        ycoordColor:'#000000', //(可选项) 字符串类型；y 轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
        ylabFont:10,    //(可选项) 数字类型；y轴字体大小； 默认 10
        unitColor:'#000000', //(可选项) 字符串类型；单位字体颜色,支持支持rgb、rgba、#； 默认  '#000000'（android不支持）
        unitlabFont:10    //(可选项) 数字类型；单位字体大小； 默认 10（android不支持）
          },
      marker:{ //弹窗样式
        bgColor:'rgba(0,0,0,0.8)',   //(可选项) 字符串类型；背景颜色,支持支持rgb、rgba、#； 默认  'rgba(0,0,0,0.8)'
        textColor:'#FFFFFF',         //(可选项) 字符串类型；文字颜色,支持支持rgb、rgba、#； 默认  '#FFFFFF'
        corner: 3,                   //(可选项)数字类型；圆角；默认：3
        prdfix:'总计:',               //(可选项) 字符串类型；描述签字；默认  '值1...n:'
        lineWidth:2,                 //(可选项)数字类型；线条宽度；默认：2
        lineColor:'#DC143C',         //(可选项) 字符串类型；线条颜色,支持支持rgb、rgba、#； 默认  '#DC143C'
        title:'第一天',               //(可选项) 字符串类型；标题； 默认：x轴对应的值
    }
}

fixedOn：

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

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

callback(ret)

ret:

类型：JSON对象
描述：打开的曲线图id和点击事件回调；
内部字段：

示例代码

var UIChartline = api.require('UIChartline');
var params = {
    xTitles:['第1天','第2天','第3天','第4天','第5天','第6天','第7天','第8天','第9天','第10天','第11天','第12天','第13天','第14天'],
    valuesArray:[[19,77,22,44,33,51,55,95,66,43,11,25,11,80],[43,54,32,66,77,43,45,77,33,78,29,55,66,33]],
    chartLineType:0,
    base:{
        isdot: true,        //（可选项）布尔类型；是否显示圆点；默认值：true
        dot:'#000000',      //(可选项) 字符串类型；圆点背景颜色,支持rgb、rgba、#； 默认 '#000000'
        animation: true,    //（可选项）布尔类型；是否显示绘制动画；默认值：true
        animationTime: 3,   //（可选项）数字类型；动画时间；默认值：1
        yUnit:'%',          //(可选项) 字符串类型；y轴单位； 默认 ''
    },
    rect:{
        x: 0,      //（可选项）数字类型；曲线图 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
        y: 0,      //（可选项）数字类型；曲线图 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
<!--                    w: 320,    //（可选项）数字类型；曲线图长（相对于所属的 Window 或 Frame）；默认值：所属的 Window 或 Frame的宽-->
        h: 400    //（可选项）数字类型；曲线图高（相对于所属的 Window 或 Frame）；默认值：200
    },
        bg:'#CCFF33',                //(可选项) 字符串类型；曲线图背景颜色； 默认 '#ffffff'
        line:{                       //(可选项) JSON对象；曲线相关设置
            lineBg:['#3300FF','#339900'],        //(可选项) 数组类型；曲线颜色，支持支持rgb、rgba、#；默认 '#FF0000'
            lineWidth:2,            //(可选项) 数字类型；曲线宽度；默认：2
        },
        axis:{                       //(可选项) JSON对象；曲线相关设置
            axisBg:'#FFA500',       //(可选项) 字符串类型；轴颜色，支持支持rgb、rgba、#；默认 '#FFA500'
            axisWidth:2,            //(可选项) 字符串类型；轴宽度；默认：2
        },
        assistLine:{
            yenable: true,      //（可选项）布尔类型；是否显示横线辅助线；默认值：true
            ywidth: 1,          //（可选项）数字类型；横线辅助线宽度；默认值：1
            ycolor: '#CCCCCC', //(可选项) 字符串类型；横线辅助线颜色,支持支持rgb、rgba、#； 默认 '#CCCCCC'
            xenable: true,      //（可选项）布尔类型；是否显示纵线辅助线；默认值：true
            xwidth: 1,          //（可选项）数字类型；横纵线辅助线宽度；默认值：1
            xcolor:'#CCCCCC'  //(可选项) 字符串类型；纵线辅助线颜色,支持支持rgb、rgba、#； 默认  '#CCCCCC'
        },
        assistLable:{
            xcoordColor:'#000000', //(可选项) 字符串类型；x轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
            xlabFont:'10',    //(可选项) 数字类型；x轴字体大小； 默认 '10'
            ycoordColor:'#000000', //(可选项) 字符串类型；y 轴字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
            ylabFont:'10',    //(可选项) 数字类型；y轴字体大小； 默认 '10'
            unitColor:'#000000', //(可选项) 字符串类型；单位字体颜色,支持支持rgb、rgba、#； 默认  '#000000'
            unitlabFont:'10'    //(可选项) 数字类型；单位字体大小； 默认 '10'
        }
    },
    fixedOn:api.frameName
    };
    UIChartline.open(params, function(ret) {
                     alert(ret.id);
                     });

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

close

关闭曲线图窗口

close(params);

params

id:

类型：数字类型
描述：曲线图id

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

reloadData

刷新曲线数据。

reloadData(params)

params

id:

类型：数字类型
描述：曲线图id

类型：数组类型
描述：刷新曲线图数据

示例代码

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

显示曲线图窗口

show(params);

params

id:

类型：数字类型
描述：曲线图id

示例代码

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

hide

隐藏曲线图窗口

hide(params);

params

id:

类型：数字类型
描述：曲线图id

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

可用性

iOS系统，android系统