图案填充和渐变填充

可以通过向单元格应用图案或渐变效果来增强表格的单元格外观。

该特性帮助用户在SpreadJS表单中向单元格添加强调。它还允许用户在使用黑白打印机时向包含文本的单元格添加简单的图案，以便文本仍然可读。

图案填充

通过使用Style对象的BackColor属性，可以在单元格上应用图案填充效果。您可以为图案填充效果指定图案样式、单元格背景颜色和图案颜色。

请参考下面为表格单元格使用图案填充的图像。

使用代码

$(document).ready(function () {
    //初始化spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    //获取活动表
    var activeSheet = spread.getSheet(0);

    // 设置带有图案填充的单元格的样式
    for (i = 1; i < 19; i++) {
        var pat = { type: i, backgroundColor: "blue", patternColor: "red" };
        style = new GC.Spread.Sheets.Style();
        style.backColor = pat;
        activeSheet.setStyle(i, 1, style)
}

渐变填充

渐变填充创建了不同颜色之间的混合。可以使用 Style 对象的 BackColor 属性在单元格上应用渐变填充效果。使用此属性，您可以为单元格指定渐变路径填充样式或渐变填充样式。

参考下图，它对表格中的单元格使用了渐变填充。

使用代码

以下代码将渐变填充效果应用于表单中的单元格区域。

$(document).ready(function () {
    //初始化spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    //获取活动表
    var activeSheet = spread.getSheet(0);

    // 用渐变填充设置单元格的样式
    var gra = { degree: 315, stops: [{ position: 0, color: "red" }, { position: 0.5, color: "white" }, { position: 1, color: "blue" },] };
    style = new GC.Spread.Sheets.Style();
    style.backColor = gra;
    activeSheet.setStyle(1, 1, style);

    // 用渐变路径填充设置单元格的样式
    var gra2 = { type: "path", left: 0.4, top: 0.4, right: 0.6, bottom: 0.6, stops: [{ position: 0, color: "black" }, { position: 0.5, color: "blue" }, { position: 1, color: "white" },] },
    style = new GC.Spread.Sheets.Style();
    style.backColor = gra2;
    activeSheet.setStyle(1, 3, style)
}

用例场景

例如，假设您正在处理的数据覆盖了意大利各城市的区域人口。在这里，我们可以使用图案填充和渐变填充效果来增加单元格的重点。我们可以使用渐变路径填充样式突出显示标题数据，即“城市”、“人口”和“区域”。方法突出显示平均值以上的总体数据

请参考以下在单元格上使用图案填充和渐变填充效果的图像。

使用代码

以下代码向表格中的单元格添加图案填充和渐变填充效果。

$(document).ready(function () {
    //初始化spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    //获取活动表
    var activeSheet = spread.getSheet(0);

    // 创建数据
    var data = [
        ["City", "Population", "Area"],
        ['Rome', 2761477, 1285.31],
        ['Milan', 1324110, 181.76],
        ['Naples', 959574, 117.27],
        ['Turin', 907563, 130.17],
        ['Palermo', 655875, 158.9],
        ['Genoa', 607906, 243.60],
        ['Bologna', 380181, 140.7],
        ['Florence', 371282, 102.41],
        ['Fiumicino', 67370, 213.44],
        ['Anzio', 52192, 43.43],
        ['Ciampino', 1323261, 11]
    ];

    // 设置数据
    activeSheet.setArray(1, 1, data);

    //设置列宽
    activeSheet.setColumnWidth(1, 110);
    activeSheet.setColumnWidth(2, 110);
    activeSheet.setColumnWidth(3, 110);  

    // 设置数据标题的渐变路径填充样式
    var gra2 = { type: "path", left: 0.4, top: 0.4, right: 0.6, bottom: 0.6, stops: [{ position: 0, color: "lightblue" }, { position: 0.5, color: "yellow" }, { position: 1, color: "white" },] },
    style = new GC.Spread.Sheets.Style();
    style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    style.backColor = gra2;
    for (var i = 1; i < 4; i++) {
        activeSheet.setStyle(1, i, style)
    }

    // 将“Population”的渐变填充样式设置在平均值之上
    var gra = { degree: 315, stops: [{ position: 0, color: "red" }, { position: 0.5, color: "white" }, { position: 1, color: "blue" },] };
    var style = new GC.Spread.Sheets.Style();
    style.backColor = gra;
    activeSheet.conditionalFormats.addAverageRule(GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above, style, [new GC.Spread.Sheets.Range(2, 2, 11, 1)]);

    // 将“'Area”的图案填充样式设置在平均以下
    var pat = { type: 8, backgroundColor: "lightblue", patternColor: "pink" };
    style = new GC.Spread.Sheets.Style();
    style.backColor = pat;
    activeSheet.conditionalFormats.addAverageRule(GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.below, style, [new GC.Spread.Sheets.Range(2, 3, 11, 1)]);
});