divisionalLineChart

来自于：开发者立即使用

open reloadData updateShadow close hide show

论坛示例

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

概述

divisionalLineChart模块封装了一个折线图视图，开发者可自定义其样式，可刷新数据，左右拖动查看不同的数据，并且能响应用户点击结点的事件。目前暂仅支持绘制单条折线，由于本模块是由第三方模块开发者提供，使用本模块需在线云编译安装包。

实例截图如下：

图片说明

open

打开折线图视图

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度，支持auto；默认：auto
  5.     h: 200  //（可选项）数字类型；模块的高度，支持auto；默认：w * 2.0/3.0
  6. }

bg：

  • 类型：字符串

  • 描述：（可选项）模块背景色，支持rgb、rgba、#。

  • 描述：（可选项）模块背景色，支持rgb、rgba、#

  • 默认值：#4A708B

coordinate：

  • 类型：JSON 对象
  • 描述：（可选项）折线图的坐标系配置
  • 内部字段：
  1. {
  2.     yAxis: {                //（可选项）JSON 对象；y 轴配置
  3.         max: 120,            //（可选项）数字类型；y 轴最大值；默认：120
  4.         min: 60,             //（可选项）数字类型；y 轴最小值；默认：60
  5.         step: 10,            //（可选项）数字类型；y 轴刻度间隔；默认：10
  6.         width: 30,           //（可选项）数字类型；y 轴区域宽度；默认：30
  7.         size: 12 ,           //（可选项）数字类型；y 轴标注字体大小；默认：12
  8.         color: '#fff'        //（可选项）字符串类型；y轴标注字体颜色；默认：#fff
  9.     },
  10.     xAxis: {                //（可选项）JSON 对象；x 轴配置
  11.         step: 10,            //（可选项）数字类型；x 轴刻度间隔；默认：10
  12.         minStep: 1,          //（可选项）数字类型；x 轴最小刻度间隔；默认：1
  13.         minStepGap: 7,       //（可选项）数字类型；x 轴最小刻度间隔反应到屏幕上的间距；默认：7（单位同 rect 中的数字相同）
  14.         height: 30,          //（可选项）数字类型；x 轴区域的高度；默认：30
  15.         size: 12 ,           //（可选项）数字类型；x 轴标注字体大小；默认：12
  16.         color: '#fff'        //（可选项）字符串类型；x轴标注字体颜色；默认：#fff
  17.     },
  18.     border: {               //（可选项）JSON 对象；坐标系线配置
  19.         size: 0.5,          //（可选项）数字类型；坐标系线粗细；默认：0.5
  20.         color: '#fff'       //（可选项）字符串类型；坐标系颜色，支持rgb、rgba、#；默认：#fff
  21.     },
  22.     brokenLine: {           //（可选项）JSON对象；折现样式配置
  23.         color: '#fff',       //（可选项）字符串类型；折线颜色，支持 rgb，rgba，#；默认：#fff
  24.         width: 1.5           //（可选项）数字类型；折线粗细；默认：1.5
  25.     }    
  26. }

注意：

在 y 轴上每段 step 的距离 = （模块总高度 - x 轴区域高度 - 最顶端的那横轴距离模块最顶端的间距) / step 总数；其中，最顶端的那横轴距离模块最顶端的间距同 y 轴标注字体大小。

shadow：

  • 类型：数组对象
  • 描述：（可选项）阴影内容样式配置信息组成的数组
  • 内部字段：
  1. [{
  2.     color: '#9AFF9A',    //（可选项）字符串类型；阴影颜色，支持 rgb、rgba、#；默认：#9AFF9A
  3.     xAxis: {             //JSON对象；阴影区域在x轴上的区间
  4.        min: 0,          //数字类型；最小值
  5.        max: 1.5         //数字类型；最大值
  6.     },
  7.     yAxis: {            //JSON对象；阴影区域在 y 轴上的区间
  8.        min: 72,         //数字类型；最小值
  9.        max: 110         //数字类型；最大值
  10.     },
  11.     dash: {              //JSON对象；阴影区域两边分割虚线配置       
  12.        color:'#fff',     //字符串类型；分割虚线颜色，支持 rgb、rgba、#；默认：#fff   
  13.     },
  14.     title: {             //JSON对象；阴影区域标题配置
  15.        text: '开始阶段',  //字符串类型；标题文本
  16.        color: '#fff',    //字符串类型；标题文本字体颜色，支持 rgb、rgba、#；默认：#ff
  17.        size: 13          //数字类型；标题文本字体大小；默认：13
  18.     }      
  19. }]

data：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：
  1. [{    
  2.     xValue: 4,    //数字类型；结点位置数据对应在 x 轴上的位置
  3.     yValue: 95    //数字类型；结点位置数据对应在 y 轴上的位置
  4. },{    
  5.     xValue: 7.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  6.     yValue: 88    //数字类型；结点位置数据对应在 y 轴上的位置
  7. },{    
  8.     xValue: 9.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  9.     yValue: 115   //数字类型；结点位置数据对应在 y 轴上的位置
  10. }]

fixedOn：

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

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：是否将模块视图固定到窗口上，不跟随窗口上下滚动，可为空

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     id: 1,       //数字类型；打开的折线图视图的 id
  3.     eventType:''  //字符串类型；交互事件类型，取值范围如下：
  4.                   //scrollLeft：滚动到左边并超出一定阈值的事件
  5.                   //scrollRight：滚动到右边并超出一定阈值的事件
  6. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.open({
  3.    rect: {
  4.         x: 0,  
  5.         y: 0,  
  6.         w: 320, 
  7.         h: 220 
  8.     },
  9.     bg: '#4A708B',
  10.     coordinate:{
  11.         yAxis: {                
  12.             max: 120,            
  13.             min: 60,             
  14.             step: 10,            
  15.             width: 30,           
  16.             size: 12 ,           
  17.             color: '#fff'        
  18.         },
  19.         xAxis: {               
  20.             step: 10,            
  21.             minStep: 1,         
  22.             minStepGap: 7,       
  23.             height: 30,          
  24.             size: 12 ,           
  25.             color: '#fff'        
  26.         },
  27.         border: {               
  28.             size: 0.5,        
  29.             color: '#fff'      
  30.         },
  31.         brokenLine: {           
  32.         color: '#fff',     
  33.         width: 1.5           
  34.     }
  35.    },
  37.     shadow: [{
  38.         color: '#9AFF9A',
  39.         xAxis: {
  40.         min: 6,
  41.         max: 14
  42.     },
  43.         yAxis: {
  44.         min: 72,
  45.         max: 102
  46.     },
  47.         dash: {
  48.         color: '#f00'
  49.    },
  50.     title: {
  51.         text: '准备阶段',
  52.         color: '#fff',
  53.         size: 13
  54.         }
  55.             },{
  56.         color: '#9AFF9A',
  57.         xAxis: {
  58.              min: 14,
  59.               max: 34
  60.                 },
  61.         yAxis: {
  62.               min: 75,
  63.               max: 100
  64.                 },
  65.         dash: {
  66.               color: '#fff',
  67.               size: 0.5
  68.                 },
  69.     title: {
  70.        text: '基本阶段',
  71.         color: '#fff',
  72.        size: 13
  73.                 }
  74.             },{
  75.         color: '#9AFF9A',
  76.         xAxis: {
  77.             min: 34,
  78.             max: 45
  79.                 },
  80.         yAxis: {
  81.             min: 85,
  82.             max: 105
  83.                 },
  84.         dash: {
  85.             color: '#fff',
  86.             size: 0.5
  87.                 },
  88.             }],
  89.     datas: [{    
  90.         xValue: 4,    //数字类型；结点位置数据对应在 x 轴上的位置
  91.         yValue: 95    //数字类型；结点位置数据对应在 y 轴上的位置
  92.     },{    
  93.         xValue: 7.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  94.         yValue: 88    //数字类型；结点位置数据对应在 y 轴上的位置
  95.     },{    
  96.         xValue: 9.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  97.         yValue: 115   //数字类型；结点位置数据对应在 y 轴上的位置
  98.     }]
  99. }, function(ret) {
  100.     if (ret) {
  101.         api.alert({
  102.             msg: JSON.stringify(ret)
  103.         });
  104.     }
  105. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新指定 id 的折线数据

reloadData({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要刷新的模块的 id

type：

  • 类型：字符串
  • 描述：更新数据的方式
  • 默认值：’updateAll’
  • 取值范围：
    • prepend（往数据源头部追加数据）
    • append（往数据源尾部追加数据）
    • updateAll（更新所有数据）

data：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：
  1. [{    
  2.     xValue: 4,    //数字类型；结点位置数据对应在 x 轴上的位置
  3.     yValue: 95    //数字类型；结点位置数据对应在 y 轴上的位置
  4. },{    
  5.     xValue: 7.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  6.     yValue: 88    //数字类型；结点位置数据对应在 y 轴上的位置
  7. },{    
  8.     xValue: 9.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  9.     yValue: 115   //数字类型；结点位置数据对应在 y 轴上的位置
  10. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:true           //布尔类型；操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.reloadData({
  3.     id: 1,
  4.     type:'updateAll',
  5.     datas: [{    
  6.         xValue: 4,    
  7.         yValue: 95    
  8.     },{    
  9.         xValue: 7.5,  
  10.         yValue: 88   
  11.     },{    
  12.         xValue: 9.5,  
  13.         yValue: 115   
  14.     },{    
  15.         xValue: 13,    
  16.         yValue: 111   
  17.     },{    
  18.         xValue: 16,  
  19.         yValue: 88    
  20.     },{    
  21.         xValue: 18,  
  22.         yValue: 115   
  23.     }]
  24. }, function(ret) {
  25.     if (ret.status) {
  26.         api.alert({
  27.             msg: '刷新数据成功'
  28.         });
  29.     } 
  30. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

updateShadow

更新阴影区域

updateShadow({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要更新阴影的模块的 id

shadow：

  • 类型：数组对象
  • 描述：（可选项）阴影内容样式配置信息
  • 内部字段：
  1. [{
  2.     color: '#9AFF9A',    //（可选项）字符串类型；阴影颜色，支持 rgb、rgba、#；默认：#9AFF9A
  3.     xAxis: {             //JSON对象；阴影区域在x轴上的区间
  4.        min: 0,          //数字类型；最小值
  5.        max: 1.5         //数字类型；最大值
  6.     },
  7.     yAxis: {            //JSON对象；阴影区域在 y 轴上的区间
  8.        min: 72,         //数字类型；最小值
  9.        max: 110         //数字类型；最大值
  10.     },
  11.     dash: {              //JSON对象；阴影区域两边分割虚线配置       
  12.        color:'#fff',     //字符串类型；分割虚线颜色，支持 rgb、rgba、#；默认：#fff   
  13.     },
  14.     title: {             //JSON对象；阴影区域标题配置
  15.        text: '开始阶段',  //字符串类型；标题文本
  16.        color: '#fff',    //字符串类型；标题文本字体颜色，支持 rgb、rgba、#；默认：#ff
  17.        size: 13          //数字类型；标题文本字体大小；默认：13
  18.     }      
  19. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:true           //布尔类型；操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.updateShadow({
  3.     id: 1,
  4.     shadow: [{
  5.         color: '#9AFF9A',    
  6.         xAxis: {            
  7.            min: 0,         
  8.            max: 1.5         
  9.         },
  10.         yAxis: {           
  11.            min: 72,         
  12.            max: 110         
  13.         },
  14.         dash: {                
  15.            color:'#fff'   
  16.         },
  17.         title: {             
  18.            text: '开始阶段',  
  19.            color: '#fff',    
  20.            size: 13          
  21.         }      
  22.     }]
  23. }, function(ret) {
  24.     if (ret.status) {
  25.         api.alert({
  26.             msg: '刷新阴影区域成功'
  27.         });
  28.     } 
  29. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭折线图视图，并从内存里清除

close({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要关闭的模块的 id

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:true           //布尔类型；操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.close({
  3. id:1
  4. },function(ret) {
  5.     if (ret.status) {
  6.         api.alert({
  7.             msg: '关闭成功'
  8.         });
  9.     } 
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏折线图视图，并未从内存清除，可调用 show 接口显示该模块

hide ({params}callback(ret))

params

id：

  • 类型：数字
  • 描述：要隐藏的模块的 id

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:true           //布尔类型；操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.hide(function(ret) {
  3. id:1
  4. },function(ret) {
  5.     if (ret.status) {
  6.         api.alert({
  7.             msg: '隐藏成功'
  8.         });
  9.     } 
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的折线图模块

show ({params}callback(ret))

params

id：

  • 类型：数字
  • 描述：要显示的模块的 id

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:true           //布尔类型；操作成功状态值
  3. }

示例代码

  1. var divisionalLineChart = api.require('divisionalLineChart');
  2. divisionalLineChart.show( {
  3. id:1
  4. },function(ret) {
  5.     if (ret.status) {
  6.         api.alert({
  7.             msg: '显示成功'
  8.         });
  9.     }
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本