패턴 채우기 및 그라데이션 채우기

스프레드시트에서 셀의 외형을 향상시키기 위해 패턴 또는 그라데이션 효과를 셀에 적용할 수 있습니다.

이 기능은 사용자가 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)
}

사용 시나리오

예를 들어, 이탈리아 도시들의 지역별 인구 데이터를 작업하고 있다고 가정해봅시다. 이 경우 셀에 패턴 채우기 및 그라데이션 채우기 효과를 사용하여 셀을 강조할 수 있습니다.

"City", "Population", "Area" 등의 헤더 데이터에는 그라데이션 경로 채우기 스타일을 사용하고, 평균 이상 인구 데이터는 일반 그라데이션 채우기 스타일로, 평균 이하 면적 데이터는 패턴 채우기 스타일로 강조할 수 있습니다.

아래 이미지는 셀에 패턴 및 그라데이션 채우기 효과를 적용한 예시입니다.

다음 코드 샘플은 셀에 패턴 채우기 및 그라데이션 채우기 효과를 추가하는 예입니다.

$(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)
    }

    // 인구 수 평균 초과 셀에 그라데이션 채우기 스타일 적용
    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)]);

    // 면적 평균 미만 셀에 패턴 채우기 스타일 적용
    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)]);
});

패턴 채우기 및 그라데이션 채우기