UIChartline

来自于:开发者立即使用

概述

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

open

打开曲线图

open(params)

params

xTitles:

  • 类型:数组类型
  • 描述:x轴数据

valuesArray:

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

chartLineType:

  • 类型:数字类型
  • 描述:(可选项)线条类型,0为曲线,1为折线
  • 默认:0

base:

  • 类型:JSON对象
  • 描述:(可选项)曲线图相关配置
{
    ishint: true,        //(可选项)布尔类型;是否显示点击弹出框;默认值:true
    isdot: true,        //(可选项)布尔类型;是否显示圆点;默认值:true
    dot:'#000000',      //(可选项) 字符串类型;圆点背景颜色,支持rgb、rgba、#; 默认 '#000000'
    showData:true,      //(可选项) 布尔类型;是否显示数据;默认值:true(ios不支持)
    animation: true,    //(可选项)布尔类型;是否显示绘制动画;默认值:true
    animationTime: 3,   //(可选项)数字类型;动画时间;默认值:1
    yUnit:'%',          //(可选项) 字符串类型;y轴单位; 默认 ''(android不支持)

}

rect:

  • 类型:JSON对象
  • 描述:(可选项)曲线图大小及坐标
{
      x: 0,      //(可选项)数字类型;曲线图 x 坐标(相对于所属的 Window 或 Frame);默认值:0
      y: 0,      //(可选项)数字类型;曲线图 y 坐标(相对于所属的 Window 或 Frame);默认值:0
      w: 320,    //(可选项)数字类型;曲线图长(相对于所属的 Window 或 Frame);默认值:所属的 Window 或 Frame的宽
      h: 200,    //(可选项)数字类型;曲线图高(相对于所属的 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
        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'(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'
        Font:14,                     //(可选项) 数字类型;字体大小; 默认  14
        corner: 3,                   //(可选项)数字类型;圆角;默认:3
        prdfix:'总计:',               //(可选项) 字符串类型;描述签字;默认  '值1...n:'
        lineWidth:2,                 //(可选项)数字类型;线条宽度;默认:2
        lineColor:'#DC143C',         //(可选项) 字符串类型;线条颜色,支持支持rgb、rgba、#; 默认  '#DC143C'
        title:'第一天',               //(可选项) 字符串类型;标题; 默认:x轴对应的值

    }


}

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:打开的曲线图id和点击事件回调;
  • 内部字段:
{
     id:0        //数字类型;打开曲线图的id
     xvalue:'',  //字符类型;x轴的值
     yvalues:[ ],//数组类型;y轴的值
}

示例代码

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

    },
    styles:{
        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'

        },
        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

valuesArray:

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

示例代码

var UIChartline = api.require('UIChartline');
var params = {
       id:1,
       valuesArray:[]
 }
UIChartline.reloadData(params);

可用性

iOS系统,android系统

可提供的1.0.0及更高版本

show

显示曲线图窗口

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系统

可提供的1.0.0及更高版本