divisionalLineChart

open updateShadow hide

论坛示例

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

概述

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

实例截图如下：

open

打开折线图视图

open({params}, callback(ret))

rect：

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

bg：

  • 类型：字符串

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

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

  • 默认值：#4A708B

coordinate：

  • 类型：JSON 对象
  • 描述：（可选项）折线图的坐标系配置
  • 内部字段：
  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. }]
  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 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.     },
  8.     bg: '#4A708B',
  9.     coordinate:{
  10.         yAxis: {                
  11.             max: 120,            
  12.             min: 60,             
  13.             step: 10,            
  14.             width: 30,           
  15.             size: 12 ,           
  16.             color: '#fff'        
  17.         },
  18.         xAxis: {               
  19.             step: 10,            
  20.             minStep: 1,         
  21.             minStepGap: 7,       
  22.             height: 30,          
  23.             size: 12 ,           
  24.             color: '#fff'        
  25.         },
  26.         border: {               
  27.             size: 0.5,        
  28.             color: '#fff'      
  29.         },
  30.         brokenLine: {           
  31.         color: '#fff',     
  32.         width: 1.5           
  33.     }
  36.     shadow: [{
  37.         color: '#9AFF9A',
  38.         xAxis: {
  39.         min: 6,
  40.         max: 14
  41.     },
  42.         yAxis: {
  43.         min: 72,
  44.         max: 102
  45.     },
  46.         dash: {
  47.         color: '#f00'
  48.    },
  49.     title: {
  50.         text: '准备阶段',
  51.         color: '#fff',
  52.         size: 13
  53.         }
  54.             },{
  55.         color: '#9AFF9A',
  56.         xAxis: {
  57.              min: 14,
  58.               max: 34
  59.                 },
  60.         yAxis: {
  61.               min: 75,
  62.               max: 100
  63.                 },
  64.         dash: {
  65.               color: '#fff',
  66.               size: 0.5
  67.                 },
  68.     title: {
  69.        text: '基本阶段',
  70.         color: '#fff',
  71.        size: 13
  72.                 }
  73.             },{
  74.         color: '#9AFF9A',
  75.         xAxis: {
  76.             min: 34,
  77.             max: 45
  78.                 },
  79.         yAxis: {
  80.             min: 85,
  81.             max: 105
  82.                 },
  83.         dash: {
  84.             color: '#fff',
  85.             size: 0.5
  86.                 },
  87.             }],
  88.     datas: [{    
  89.         xValue: 4,    //数字类型；结点位置数据对应在 x 轴上的位置
  90.         yValue: 95    //数字类型；结点位置数据对应在 y 轴上的位置
  91.     },{    
  92.         xValue: 7.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  93.         yValue: 88    //数字类型；结点位置数据对应在 y 轴上的位置
  94.     },{    
  95.         xValue: 9.5,  //数字类型；结点位置数据对应在 x 轴上的位置
  96.         yValue: 115   //数字类型；结点位置数据对应在 y 轴上的位置
  97.     }]
  98. }, function(ret) {
  99.     if (ret) {
  100.         api.alert({
  101.             msg: JSON.stringify(ret)
  102.         });
  103.     }
  104. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadData

刷新指定 id 的折线数据

reloadData({params}, callback(ret))

params

id：

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

type：

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

data：

  • 类型：数组对象
  • 描述：折线的数据信息
  • 内部字段：

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.     },{    
  11.         xValue: 9.5,  
  12.         yValue: 115   
  13.     },{    
  14.         xValue: 13,    
  15.         yValue: 111   
  16.     },{    
  17.         xValue: 16,  
  18.         yValue: 88    
  19.     },{    
  20.         xValue: 18,  
  22.     }]
  23. }, function(ret) {
  24.     if (ret.status) {
  25.         api.alert({
  26.             msg: '刷新数据成功'
  27.         });
  28.     } 
  29. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

updateShadow

更新阴影区域

updateShadow({params}, callback(ret))

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. });

可用性

可提供的1.0.0及更高版本

close

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

close({params}, callback(ret))

params

id：

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  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))

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.         });

可用性

可提供的1.0.0及更高版本