SpreadJS V14 Update1 新特性 - 迷你图增强 - 仪表盘
本帖最后由 Winny 于 2021-5-31 14:16 编辑仪表盘可以用来衡量工作的有效性，包含目标值、当前值、最小值和最大值。当想要在层次范围内描述数据状态时，可以使用仪表盘。基于此，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调用方式参考如下代码：
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"})');
页:
[1]