GC.Spread.Sheets.ConditionalFormatting.DataBarRule根据值不同表现出不同的颜色

收藏

本帖最后由前端工程师于 2018-9-27 10:35 编辑

实现的代码是
var cfs = this.$refs.worksheet.sheet.conditionalFormats ;
      var dataBarRule1 = new GC.Spread.Sheets.ConditionalFormatting.DataBarRule();
      dataBarRule1.minType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automin);
      dataBarRule1.maxType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automax);
      dataBarRule1.ranges([new GC.Spread.Sheets.Range(3, 1, 10, 1)]);  dataBarRule1.color("orange").showBorder(true).borderColor("orange").dataBarDirection(GC.Spread.Sheets.ConditionalFormatting.BarDirection.rightToLeft);
      cfs.addRule(dataBarRule1);

有个需求是先根据值的大小改变bar的颜色
比如说 0~50 是绿色  50~80是黄色  80以上是红色
能不能自定义这个颜色函数呢？

KevinChen · KevinChen

您好，您的这个需求，类似于Excel表格中条件格式的单元格色阶，Spread JS中可以实现，我贴一个JS的Demo给您参考：

$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 1
});
initSpread(spread);
});
function initSpread(spread) {
var activeSheet = spread.getSheet(0);
activeSheet.suspendPaint();
var scale = new GC.Spread.Sheets.ConditionalFormatting.ScaleRule();
scale.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.threeScaleRule);
scale.midColor("red");
scale.midType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.number);
scale.midValue(50);
scale.maxColor("blue");
scale.maxType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.number);
scale.maxValue(100);
scale.minColor("yellow");
scale.minType(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.number);
scale.minValue(10);
scale.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 10)]);
activeSheet.conditionalFormats.addRule(scale);
activeSheet.setValue(0,0, 10,3);
activeSheet.setValue(1,0, 20,3);
activeSheet.setValue(2,0, 30,3);
activeSheet.setValue(3,0, 40,3);
activeSheet.setValue(4,0, 50,3);
activeSheet.setValue(5,0, 60,3);
activeSheet.setValue(6,0, 70,3);
activeSheet.setValue(7,0, 80,3);
activeSheet.setValue(8,0, 90,3);
activeSheet.setValue(9,0, 100,3);
activeSheet.resumePaint();
}

复制代码

前端工程师 · 前端工程师

那么这种方式只能提供三段的区域值么？ mid max min
如果需要展示更多段值域比如 0~10 10~40 40~50 50~60 ......
可以解决么？

KevinChen · KevinChen

您好，您可以尝试运行一下这个Demo，
实际上设置mid、max、min的颜色后，
单元格的颜色会在这三个色域中实现渐变效果，
如图：

颜色渐变效果

您也可以尝试操作Excel中“条件格式”的“色阶”设置，与这个效果是一致的。

前端工程师 · 前端工程师

不好意思还得问一下，
刚才您发的这个是颜色渐变的，
但是根据实际需求写代码的时候更多的情况是需要自己指定多段值域，
有可能些值域渐变是非线性的，
希望可以在代码中自己定义哪些值域展示什么样的颜色

前端工程师 · 前端工程师

var cfs = this.$refs.worksheet.sheet.conditionalFormats ;
      var style1 = new GC.Spread.Sheets.Style();
      style1.backColor = "#FFCCCC";
      cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 60, 70, style1, [ new GC.Spread.Sheets.Range(3,1,10,1) ]);
      var style2 = new GC.Spread.Sheets.Style();
      style2.backColor = "#FFffCC";
      cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 10, 60, style2, [ new GC.Spread.Sheets.Range(3,1,10,1) ]);

刚刚查了一下Demo用这种方式可以实现自定义值域，但是只能使用style改变背景样色，怎么样结合DataBarRule呢？

KevinChen · KevinChen

明白了，您可以参考一下DataBarRule的API，可以设置在程序中设置color：
http://help.grapecity.com/spread ... ng.DataBarRule.html
再结合一下表格事件，比如您可以绑定一个编辑结束事件，然后拿到对应的单元格的值，并赋予其相应的颜色：

activeSheet.bind(spreadNS.Events.EditEnded, function (e, args) {
// 在此执行操作；
});

复制代码

关于编写表格事件，您可以参考一下葡萄城官网的学习指南中的Demo，地址：
https://demo.grapecity.com.cn/Sp ... /demos/spreadEvents

前端工程师 · 前端工程师

如果使用spreadNS.Events.EditEnded 事件的话只有在修改单元格数值后经过逻辑判断才会变色
那么一开始加载数据进来就不会有变色的效果了，
需要数据初始化的时候遍历每个单元格然后设定不同的DataBarRule么？，感觉这么做很繁琐

之前看到demo中的GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between 这个可以直接指定值域，但是只能改变style，
有没有可能让GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between和DataBarRule组合起来用呢？