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

收藏

本帖最后由 Winny 于 2021-5-31 14:16 编辑

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

实现仪表盘的方式有两种，会在以下内容做介绍。

1. 使用在线表格编辑器插入仪表盘
Step1：插入仪表盘
image.png424060973.png

  Step2: 设置数据源
  设置数据源有两种方式，可以选择单元格中的数据，也可以手动填写数据，如下所示：
   image.png696516418.png

  Step3: 设置仪表盘外观
  设置显示角度范围及半径比：
   image.png850569457.png

设置颜色范围：

最终显示结果：

仪表盘类型提供三种，分别是圆、垂直、水平类型，对于相同的参数，显示效果如下所示：
image.png748300475.png

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调用方式参考如下代码：

sheet.setValue(1,1,1000);
sheet.setValue(1,2,1200);
sheet.setValue(1,3,0);
sheet.setValue(1,4,1500);
sheet.setValue(2,1,"target");
sheet.setValue(2,2,"current");
sheet.setValue(2,3,"min");
sheet.setValue(2,4,"max");
sheet.setFormula(1, 5, '=GAUGEKPISPARKLINE(B2,C2,D2,E2)');
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"})');
sheet.setFormula(1, 7, '=GAUGEKPISPARKLINE(B2,C2,D2,E2,TRUE,"Target","","Min","Max",,,,0.5,0,{0,1000,"red"},{1200, 1500,"yellow"})');

复制代码

		自动登录	找回密码
密码			立即注册

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

0 个回复