SpreadJS V14 Update1 新特性 - 迷你图增强 - 仪表盘

仪表盘可以用来衡量工作的有效性，包含目标值、当前值、最小值和最大值。当想要在层次范围内描述数据状态时，可以使用仪表盘。基于此，SpreadJS V14 Update1 在迷你图中新增了仪表盘，仪表盘的各组成部分如下：
     
实现仪表盘的方式有两种，会在以下内容做介绍。

1. 使用在线表格编辑器插入仪表盘
  Step1：插入仪表盘
  
  Step2: 设置数据源
  设置数据源有两种方式，可以选择单元格中的数据，也可以手动填写数据，如下所示：
     
  Step3: 设置仪表盘外观
  设置显示角度范围及半径比：
  
  设置颜色范围：
  
  最终显示结果：
  
  仪表盘类型提供三种，分别是圆、垂直、水平类型，对于相同的参数，显示效果如下所示：
        

2. 调用API添加仪表盘
    添加仪表盘的API为 =GAUGEKPISPARKLINE(targetValue, currentValue, minValue,         maxValue,showLabel?,targetValueLabel?,currentValueLabel?,minValueLabel?,maxValueLabel?, fontArray?, minAngle?, maxAngle?, radiusRatio?,   gaugeType?, colorRange?)
各参数的 含义如下：
  targetValue: 目标值、数值类型、必须，数值要介于最小值与最大值之间；
  currentValue: 当前值、数值类型、必须、介于最小值与最大值之间；
  minValue: 最小值，数值类型、必须、小于最大值；
  maxValue:最大值，数值类型，必须，大于最小值；
  showLabel: 是否显示数据标签，默认为true;
  targetValueLabel: 是否显示目标值标签，boolean，默认显示；
  currentValueLabel: 是否显示当前值标签，booelan,默认显示；
  minValueLabel: 是否显示最小值标签，boolean,默认显示；
  maxValueLabel:是否显示最大值标签，boolean，默认显示；
  fontArray: 分别用来设置目标值、当前值、最小值、最大值数据轴显示字体;
  minAngle: 仪表盘类型为圆时，设置起点位置，默认为-90，当值为0时对应12点钟方向，整数代表顺时针，负数代表逆时针；
  maxAngle: 仪表盘类型为圆时，设置终点位置；
  radioRatio:半径比，内圈半径除以外圈半径即为半径比（介于0和1之间），外圈半径值由单元格大小决定；
  gauageType: 仪表盘类型、数值类型，0代表圆类型，1代表垂直类型，2代表水平类型；
  colorRange: 颜色范围。
  关于API调用方式参考如下代码：

1. sheet.setValue(1,1,1000);
   
2. sheet.setValue(1,2,1200);
   
3. sheet.setValue(1,3,0);
   
4. sheet.setValue(1,4,1500);
   
5. sheet.setValue(2,1,"target");
   
6. sheet.setValue(2,2,"current");
   
7. sheet.setValue(2,3,"min");
   
8. sheet.setValue(2,4,"max");
   
9. sheet.setFormula(1, 5, '=GAUGEKPISPARKLINE(B2,C2,D2,E2)');
   
10. sheet.setFormula(1, 6, '=GAUGEKPISPARKLINE(B2,C2,D2,E2,TRUE,B3,C3,D3,E3,{"","bold 30px Calibri","",""},-110,110,0.5,0,{0,1000,"red"},{1200, 1500,"yellow"})');
    
11. sheet.setFormula(1, 7, '=GAUGEKPISPARKLINE(B2,C2,D2,E2,TRUE,"Target","","Min","Max",,,,0.5,0,{0,1000,"red"},{1200, 1500,"yellow"})');
    
12. 
    
13. 
    

复制代码