Web Components 스프레드시트 조건부 서식

    Web Components Spreadsheet 구성 요소를 사용하면 워크시트의 셀에 조건부로 서식을 지정할 수 있습니다. 이렇게 하면 조건에 따라 데이터의 여러 부분을 강조 표시할 수 있습니다.

    Web Components Spreadsheet Conditional Formatting Example

    Conditional Formatting Overview

    특정 워크시트의 조건부 서식은 여러 가지 기능을 사용하여 설정할 수 있습니다Add 방법 설명conditionalFormats 그 워크시트 모음. 이 중 첫 번째 매개변수Add 메서드는 조건부 형식을 적용하고자 하는 워크시트의 문자열 영역입니다.

    워크시트에 추가할 수 있는 많은 조건부 형식에는 조건이 맞을 때 셀이 어떻게 보여야 하는지 결정하는 속성이 있습니다cellFormat. 예를 들어, 이cellFormat 속성에 붙은 속성들(예:fill와font 같은)을 사용해 셀의 배경과 글꼴 설정을 각각 결정할 수 있습니다.

    조건부 형식이 생성되고cellFormat 적용 시 현재 워크시트 셀에서 지원하는 속성 일부가 있습니다. 현재 인정받는 부동산들은cellFormat​fill,Border 성질,formatString, 그리고font 스트라이스루, 밑줄, 이탤릭체, 굵기, 색상과 같은 속성이 있습니다. 이 중 많은 부분은 아래 코드 스니펫에서 확인할 수 있습니다.

    셀 시각화가 다르게 동작하기 때문에 속성이 없는cellFormat 조건부 형식도 몇 가지 있습니다. 이 조건부 형식은 다음과 같습니다.DataBarConditionalFormat​ColorScaleConditionalFormat​IconSetConditionalFormat​

    Excel에서 기존 통합 문서를 로드하는 경우 해당 통합 문서가 로드될 때 형식이 유지됩니다. 통합 문서를 Excel 파일로 저장할 때도 마찬가지입니다.

    다음은 Web ComponentsIgcSpreadsheetComponent 제어에서 지원되는 조건부 형식을 나열합니다:

    • AverageConditionalFormat: 이addAverageCondition 방법을 사용하여 추가된 조건부 형식은 해당 범위의 셀 값이 평균 또는 표준편차보다 높거나 낮은지에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출시킵니다.
    • BlanksConditionalFormat: 이addBlanksCondition 메서드를 사용하여 추가된 조건부 형식은 셀 값이 설정되지 않았는지에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • ColorScaleConditionalFormat: 이addColorScaleCondition 방법을 사용하여 추가된 조건부 형식은 최소값, 중간점, 최대 임계값에 대한 셀 값을 기준으로 워크시트 셀의 색칠을 제어하는 속성을 노출합니다.
    • DataBarConditionalFormat: 이addDataBarCondition 메서드를 사용하여 추가된 조건부 형식은 해당 셀의 값과 관련 값 범위에 따라 워크시트 셀의 데이터 바를 표시하는 속성을 노출합니다.
    • DateTimeConditionalFormat: 이addDateTimeCondition 메서드를 사용하여 추가된 조건부 형식은 셀의 날짜 값이 주어진 시간 범위 내에 있는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • DuplicateConditionalFormat: 이addDuplicateCondition 메서드를 사용하여 추가된 조건부 형식은 셀의 값이 고유한지 또는 관련 범위 전반에 걸쳐 중복되는지에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • ErrorsConditionalFormat: 이addErrorsCondition 메서드를 사용하여 추가된 조건부 형식은 셀 값이 유효한지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • FormulaConditionalFormat: 이addFormulaCondition 메서드를 사용하여 추가된 조건부 형식은 워크시트 셀의 값이 공식에서 정의된 기준을 충족하는지 여부에 따라 시각적 속성을 제어하는 속성을 노출합니다.
    • IconSetConditionalFormat: 이addIconSetCondition 메서드를 사용하여 추가된 조건부 형식은 임계값에 대한 셀 값을 기준으로 워크시트 셀 내 아이콘을 표시하는 속성을 노출합니다.
    • NoBlanksConditionalFormat: 이addNoBlanksCondition 메서드를 사용하여 추가된 조건부 형식은 셀 값이 설정되었는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • NoErrorsConditionalFormat: 이addNoErrorsCondition 메서드를 사용하여 추가된 조건부 형식은 셀 값이 유효한지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • OperatorConditionalFormat: 이addOperatorCondition 메서드를 사용하여 추가된 조건부 형식은 논리 연산자가 정의한 기준을 충족하는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • RankConditionalFormat: 이addRankCondition 방법을 사용하여 추가된 조건부 형식은 해당 셀의 값이 관련 범위 내 값의 상단 또는 하위 랭크 내에 있는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • TextOperatorConditionalFormat: 이addTextCondition 메서드를 사용하여 추가된 이 조건부 형식은 셀의 텍스트 값이 문자열과FormatConditionTextOperator 메서드 매개변수에addTextCondition 포함된 값이 정의한 기준을 충족하는지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.
    • UniqueConditionalFormat: 이addUniqueCondition 방법을 사용하여 추가된 조건부 형식은 해당 셀의 값이 관련 범위 전반에 걸쳐 유일한지 여부에 따라 워크시트 셀의 시각적 속성을 제어하는 속성을 노출합니다.

    Dependencies

    컨트롤에IgcSpreadsheetComponent 조건부 서식을 추가하려면 다음 의존성을 가져와야 합니다:

    import { CellFill } from "igniteui-webcomponents-excel";
import { Color } from 'igniteui-webcomponents-core';
import { ColorScaleType } from "igniteui-webcomponents-excel";
import { FormatConditionAboveBelow } from 'igniteui-webcomponents-excel';
import { FormatConditionIconSet } from 'igniteui-webcomponents-excel';
import { FormatConditionOperator } from 'igniteui-webcomponents-excel';
import { FormatConditionTextOperator } from 'igniteui-webcomponents-excel';
import { FormatConditionTimePeriod } from 'igniteui-webcomponents-excel';
import { FormatConditionTopBottom } from "igniteui-webcomponents-excel";
import { WorkbookColorInfo } from 'igniteui-webcomponents-excel';

    Code Snippet

    다음 코드 스니펫은 컨트롤 내IgcSpreadsheetComponent 스프레드시트에 각 조건 형식을 추가하는 방법을 보여줍니다:

    let sheet = this.spreadsheet.activeWorksheet;

let red = new Color();
red.colorString = "#ff0000";

let blue = new Color();
blue.colorString = "#0000ff";

let green = new Color();
green.colorString = "#00ff00";

let gray = new Color();
gray.colorString = "#d3d3d3";

let avgFormat = sheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
avgFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let blanksFormat = sheet.conditionalFormats().addBlanksCondition("B1:B10");
blanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let colorFormat = sheet.conditionalFormats().addColorScaleCondition("C1:C10", ColorScaleType.ThreeColor);
colorFormat.minimumThreshold.formatColor = new WorkbookColorInfo(red);
colorFormat.midpointThreshold.formatColor = new WorkbookColorInfo(blue);
colorFormat.maximumThreshold.formatColor = new WorkbookColorInfo(green);

let dataBarFormat = sheet.conditionalFormats().addDataBarCondition("D1:D10");

let dateTimeFormat = sheet.conditionalFormats().addDateTimeCondition("E1:E10", FormatConditionTimePeriod.NextWeek);
dateTimeFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let duplicateFormat = sheet.conditionalFormats().addDuplicateCondition("F1:F10");
duplicateFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let errorFormat = sheet.conditionalFormats().addErrorsCondition("G1:G10");
errorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let formulaFormat = sheet.conditionalFormats().addFormulaCondition("H1:H10", "=H1>2");
formulaFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let iconFormat = sheet.conditionalFormats().addIconSetCondition("I1:I10", FormatConditionIconSet.IconSet3TrafficLights1);

let noBlanksFormat = sheet.conditionalFormats().addNoBlanksCondition("J1:J10");
noBlanksFormat.cellFormat.fill = CellFill.createSolidFill(new WorkbookColorInfo(gray));

let noErrorFormat = sheet.conditionalFormats().addErrorsCondition("K1:K10");
noErrorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let operatorFormat = sheet.conditionalFormats().addOperatorCondition("L1:L10", FormatConditionOperator.Greater);
operatorFormat.setOperand1(500);
operatorFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

let rankFormat = sheet.conditionalFormats().addRankCondition("M1:M10", FormatConditionTopBottom.Top, 5);
rankFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(green);

let textFormat = sheet.conditionalFormats().addTextCondition("N1:N10", "A", FormatConditionTextOperator.Contains);
textFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(red);

let uniqueFormat = sheet.conditionalFormats().addUniqueCondition("O1:O10");
uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue);

    API References