SpreadJS使用教程：如何用代码实现data bar和cell value方法-控件新闻-慧都网

SpreadJS使用教程：如何用代码实现data bar和cell value方法

转帖|使用教程|编辑：鲍佳佳|2020-07-23 10:13:03.743|阅读 199 次

概述：SpreadJS是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，具有 “高性能、跨平台、与 Excel 高度兼容”的产品特性。本文主要讲解如何使用data bar和cell value方法。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

使用 Cell Value 规则

Cell Value 规则将会比对 cell 的值。

以下代码使用了 Cell Value 规则。

JavaScript

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var rule = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
rule.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.CellValueRule);
rule.ranges([new GC.Spread.Sheets.Range(0,0,5,1)]);
rule.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between);
rule.style(style);
rule.value1(2);
rule.value2(100);
activeSheet.conditionalFormats.addRule(rule);
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,45,3);
// OR
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var ranges=[new GC.Spread.Sheets.Range(0,0,5,1)];
activeSheet.conditionalFormats.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between, 2, 100, style, ranges);
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,45,3);

使data bar规则

Spread.Sheets 支持 data bar 规则.data bar 在每一个单元格中显示了一个长条。长条的长度与单元格中的数据有关。长条的长度越长，单元格中的值越大。你可以设置最大值和最小值的类型和值 minType方法可以设置为 Number, LowestValue, HighestValue, Percent, Formula, Percentile, 和 Automin 或者 Automax。

你可以使用addDataBarRule方法来创建一个规则并将其放到规则集合中。BarDirection类和DataBarAxisPosition类可以用来设置横条的朝向和正值的方向。

示例代码

以下例子创建了一个 Data Bar 规则并addRule方法添加该规则。

activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);
var dataBarRule = new GC.Spread.Sheets.ConditionalFormatting.DataBarRule(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.Number, -1, GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.Number, 40, "green", [new GC.Spread.Sheets.Range(0,0,4,1)]);
dataBarRule.color("green");
dataBarRule.showBorder(true);
dataBarRule.borderColor("orange");
dataBarRule.dataBarDirection(GC.Spread.Sheets.ConditionalFormatting.BarDirection.LeftToRight);
dataBarRule.negativeFillColor("yellow");
dataBarRule.useNegativeFillColor(true);
dataBarRule.negativeBorderColor("red");
dataBarRule.useNegativeBorderColor(true);
dataBarRule.axisPosition(GC.Spread.Sheets.ConditionalFormatting.DataBarAxisPosition.Automatic);
dataBarRule.axisColor("blue");
dataBarRule.showBarOnly(false);
activeSheet.conditionalFormats.addRule(dataBarRule);

本文转载自葡萄城

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询慧都在线客服>>