다음을 통해 공유

조건부 서식 추가

  • 아티클

조건부 서식을 통해 보고서 작성자는 숫자 값에 따라 보고서에 색상이 표시되는 방법을 지정할 수 있습니다.

이 문서에서는 Power BI 시각적 개체에 조건부 서식 기능을 추가하는 방법을 설명합니다.

현재 조건부 서식은 색에만 적용할 수 있습니다.

프로젝트에 조건부 서식 추가

이 섹션에서는 기존 Power BI 시각적 개체에 조건부 서식을 추가하는 방법을 보여줍니다. 이 문서의 예제 코드는 SampleBarChart 시각적 개체를 기반으로 합니다. barChart.ts에서 소스 코드를 검사할 수 있습니다.

서식 창에 조건부 색 서식 지정 항목 추가

이 섹션에서는 서식 창의 데이터 요소에 조건부 색 서식 지정 항목을 추가하는 방법을 알아봅니다.

  1. powerbi-visuals-api에서 노출하는 VisualObjectInstance의 propertyInstanceKind 배열을 사용합니다. 파일에 다음 가져오기가 포함되는지 확인합니다.

    import powerbiVisualsApi from "powerbi-visuals-api";

  2. 적절한 서식 유형(상수, ConstantOrRule 또는 규칙)을 지정하려면 VisualEnumerationInstanceKinds 열거를 사용합니다. 파일에 다음 가져오기를 추가합니다.

    import VisualEnumerationInstanceKinds = powerbiVisualsApi.VisualEnumerationInstanceKinds;

  3. 서식 속성 인스턴스 종류 설정

조건부 서식을 지원하는 속성의 서식을 지정하려면 descriptor에서 필요한 인스턴스 종류를 설정합니다.

 public getFormattingModel(): powerbi.visuals.FormattingModel {
    // ...
    formattingGroup.slices.push(
        {
            uid: `colorSelector${barDataPoint_indx}_uid`,
            displayName: barDataPoint.category,
            control: {
                type: powerbi.visuals.FormattingComponent.ColorPicker,
                properties: {
                    descriptor: {
                        objectName: "colorSelector",
                        propertyName: "fill",                
                        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals),
                        altConstantValueSelector: barDataPoint.selectionId.getSelector(),
                        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule // <=== Support conditional formatting
                    },
                    value: { value: barDataPoint.color }
                }
            }
        }
    );
    // ...
 }

VisualEnumerationInstanceKinds.ConstantOrRule은 상수 서식 지정 UI 요소와 함께 조건부 서식 UI 항목을 만듭니다.

일반 색 버튼 옆에 있는, Power BI에 표시되는 조건부 서식 버튼의 스크린샷

조건부 서식 지정 동작 방법 정의

서식 지정을 계열 데이터 요소에 적용하는 방법을 정의합니다.

powerbi-visuals-utils-dataviewutils에서 선언된 createDataViewWildcardSelector를 사용하여 조건부 서식을 인스턴스, 합계 또는 둘 다에 적용할지 여부를 지정합니다. 자세한 내용은 DataViewWildcard를 참조하세요.

조건부 서식을 적용하려는 속성을 다음과 같이 변경합니다.

  • selector 값을 dataViewWildcard.createDataViewWildcardSelector(dataViewWildcardMatchingOption) 호출로 바꿉니다. DataViewWildcardMatchingOption은(는) 조건부 서식이 인스턴스, 합계 또는 둘 다에 적용되는지 여부를 정의합니다.

  • selector 속성에 대해 이전에 정의된 값을 가진 altConstantValueSelector 속성을 추가합니다.

조건부 서식을 지원하는 서식 속성의 경우 descriptor에서 필요한 인스턴스 종류를 설정합니다.

 
 public getFormattingModel(): powerbi.visuals.FormattingModel {
    // ...

    formattingGroup.slices.push(
        {
            uid: `colorSelector${barDataPoint_indx}_uid`,
            displayName: barDataPoint.category,
            control: {
                type: powerbi.visuals.FormattingComponent.ColorPicker,
                properties: {
                    descriptor: {
                        objectName: "colorSelector",
                        propertyName: "fill",                
                        // Define whether the conditional formatting will apply to instances, totals, or both
                        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals),

                        // Add this property with the value previously defined for the selector property
                        altConstantValueSelector: barDataPoint.selectionId.getSelector(),

                        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
                    },
                    value: { value: barDataPoint.color }
                }
            }
        }
    );

    // ...
 }

고려 사항 및 제한 사항

조건부 서식 지정은 다음 시각적 개체에 대해 지원되지 않습니다.

  • 테이블 기반 시각적 개체

  • 행렬 기반 시각적 개체

조건부 서식을 계열과 함께 사용하지 않는 것이 좋습니다. 대신 계열을 시각적으로 쉽게 구분할 수 있도록 고객이 각 계열의 서식을 개별적으로 지정하도록 허용해야 합니다. 계열을 포함하는 대부분의 기본 시각적 개체는 이 방법을 공유합니다.

관련 콘텐츠

DataViewUtils