UIChartline

open close reloadData show hide

概述

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,    //（可选项）数字类型；支持设置'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
        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及更高版本

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