Power BI 시각적 개체에 방문 페이지 추가

Power BI 시각적 개체의 방문 페이지는 카드가 데이터를 가져오기 전에 Power BI 시각적 개체 카드에 정보를 표시할 수 있습니다. 시각적 개체의 방문 페이지는 다음을 표시할 수 있습니다.

• 시각적 개체를 사용하는 방법을 설명하는 텍스트
• 웹 사이트 링크
• 동영상 링크

이 문서는 시각적 개체의 방문 페이지를 디자인하는 방법을 설명합니다. 시각적 개체에 데이터가 없을 때마다 방문 페이지가 표시됩니다.

참고 항목

Power BI 시각적 개체 방문 페이지 디자인은 API 버전 2.3.0 이상에서 지원됩니다. 사용 중인 버전을 확인하려면 pbiviz.json 파일에서 apiVersion을 확인합니다.

방문 페이지 만들기

방문 페이지를 만들려면 capabilities.json 파일에 두 개의 기능을 설정해야 합니다.

• 방문 페이지가 작동하려면 supportsLandingPage를 사용 설정해야 합니다.
• data-roles 모드에 있지 않은 경우에도 시작 페이지를 보기 모드로 표시하거나 시각적 개체를 대화형으로 표시하려면 supportsEmptyDataView를 사용하도록 설정합니다.

    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

방문 페이지가 있는 시각적 개체의 예

다음 코드는 막대형 차트 시각적 개체에 방문 페이지를 추가할 수 있는 방법을 보여 줍니다.

export class BarChart implements IVisual {
    //...
    private element: HTMLElement;
    private isLandingPageOn: boolean;
    private LandingPageRemoved: boolean;
    private LandingPage: d3.Selection<any>;

    constructor(options: VisualConstructorOptions) {
            //...
            this.element = options.element;
            //...
    }

    public update(options: VisualUpdateOptions) {
    //...
        this.HandleLandingPage(options);
    }

    private HandleLandingPage(options: VisualUpdateOptions) {
        if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
            if(!this.isLandingPageOn) {
                this.isLandingPageOn = true;
                const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
                this.element.appendChild(SampleLandingPage);
                this.LandingPage = d3.select(SampleLandingPage);
            }

        } else {
                if(this.isLandingPageOn && !this.LandingPageRemoved){
                    this.LandingPageRemoved = true;
                    this.LandingPage.remove();
                }
        }
    }

다음 단계

서식 유틸리티