선택기를 사용하여 영향을 미치는 시각적 개체 제어

아티클
09/17/2023

일부 기능을 사용하면 선택기를 사용하여 어떤 시각적 개체가 적용되는지 제어할 수 있습니다. 선택기는 선택 사항이며, 선택기가 표시되지 않으면 보고서의 모든 시각적 개체에 설정을 적용할 수 있습니다.

지원되는 기능

선택기는 다음 기능에서 사용할 수 있습니다.

메뉴 명령 수정
시각적 머리글 숨기기 또는 표시
보고서 로드의 슬라이서

선택기 형식

시각적 개체 이름

지정된 시각적 개체에 대해서만 설정을 적용합니다.

selector: {
    $schema: "http://powerbi.com/product/schema#visualSelector",
    visualName: <a visual name> // You can retrieve the name using `getVisuals`
}

시각적 개체 이름을 찾으려면 페이지에서 API를 getVisuals() 사용하고 시각적 개체의 name 속성을 가져올 수 있습니다. 시각적 개체 이름은 고유 식별자입니다.

시각적 개체 유형

지정된 형식의 모든 시각적 개체에 설정을 적용합니다.

selector: {
    $schema: "http://powerbi.com/product/schema#visualTypeSelector",
    visualType: <a visual type> // You can retrieve the type using `getVisuals`
}

시각적 개체 유형을 찾기 위해 페이지에서 API를 getVisuals() 사용하고 시각적 개체의 type 속성을 가져올 수 있습니다.

슬라이서 대상

지정된 대상이 있는 슬라이서에 대해서만 슬라이서 상태를 적용합니다.

selector: {
    $schema: "http://powerbi.com/product/schema#slicerTargetSelector",
    target: <target data field>  
}

예

시각적 헤더 설정

보고서의 모든 시각적 개체 헤더를 숨깁니다.

let config = {
    …
    settings: {
        …
        visualSettings: {
            visualHeaders: [
                {
                    settings: {
                        visible: false
                    }
                    /* No selector - Hide visual header for all the visuals in the report */
                }
            ]
        }
    }
};

시각적 선택기를 사용하여 특정 시각적 개체에 대한 시각적 개체 헤더를 숨깁니다.

let config = {
    …
    settings: {
        …
        visualSettings: {
            visualHeaders: [
                {
                    settings: {
                        visible: false
                    }
                    selector: {
                        $schema: "http://powerbi.com/product/schema#visualSelector",
                        visualName: "VisualContainer1",
                    }
                }
            ]
        }
    }
};

메뉴 명령 확장과 기본 제공 명령 모두 지원 선택기를 표시합니다.

특정 시각적 옵션 메뉴에 확장 명령을 추가합니다.

let config = {
    ...
    settings: {
        ...

        // Adding the extension command to the options menu
        extensions: [
            {
                command: {
                    name: "campaign",
                    title: "Start campaign",
                    icon: base64Icon,
                    selector: {
                        $schema: "http://powerbi.com/product/schema#visualSelector",
                        visualName: tableVisualName
                    },
                    extend: {
                        visualOptionsMenu: {
                            title: "Start campaign",
                            menuLocation: models.MenuLocation.Top,
                        }
                    }
                }
            },
        ],
    }
}

형식이 있는 모든 시각적 table 개체에 대한 몇 가지 기본 제공 명령을 숨깁니다.

let tableSelector = {
    $schema: "http://powerbi.com/product/schema#visualTypeSelector",
    visualType: 'table'
};

let config = {
    ...
    settings: {
        ...
        // Hiding built-in commands on the options menu
        commands: [
            {
                spotlight: {
                    selector: tableSelector,
                    displayOption: models.CommandDisplayOption.Hidden,
                },
                exportData: {
                    selector: tableSelector,
                    displayOption: models.CommandDisplayOption.Hidden,
                },
                seeData: {
                    selector: tableSelector,
                    displayOption: models.CommandDisplayOption.Hidden,
                },
            }
        ]
    },
};

로드 중인 슬라이서

참고

로드 시 슬라이서는 시각적 유형 선택기를 지원하지 않습니다.

이름별로 특정 슬라이서 설정

let slicers = [
    {
        selector: {
            $schema: "http://powerbi.com/product/schema#visualSelector",
            visualName: "d1feb8891635af3b335a"
        },
        state: {
            filters: [
            {
                $schema:"http://powerbi.com/product/schema#advanced",
                target: {
                    table: "Store",
                    column: "StoreNumber"
                },
                filterType: models.FilterType.AdvancedFilter,
                logicalOperator: "And",
                conditions: [
                    { operator: "GreaterThanOrEqual", value: 37 },
                    { operator: "LessThanOrEqual", value: 576 }]
            }]
        }
    }
];

embedConfig = {
    slicers: slicers,
    ...
};

대상별 슬라이서 설정

// We want to slice all slicers with "StoreNumber" column target
let target = {
    table: "Store",
    column: "StoreNumber"
};

let slicers = [
    {
        selector: {
            $schema: "http://powerbi.com/product/schema#slicerTargetSelector",
            target: target
        },
        state: {
            filters: [
            {
                $schema:"http://powerbi.com/product/schema#advanced",
                target: target,
                filterType: models.FilterType.AdvancedFilter,
                logicalOperator: "And",
                conditions: [
                    {operator: "GreaterThanOrEqual", value: 37 },
                    {operator: "LessThanOrEqual", value: 576 }]
            }]
        }
    }
];

embedConfig = {
    slicers: slicers,
    ...
};