共用方式為


將登陸頁面新增至 Power BI 視覺效果

Power BI 視覺效果的登陸頁面可在卡片取得資料之前,在 Power BI 視覺效果卡片中顯示資訊。 視覺效果的登陸頁面可以顯示:

  • 說明如何使用視覺效果的文字。
  • 網站的連結。
  • 影片的連結。

Power BI 視覺效果範例登陸頁面的螢幕擷取畫面。

本文說明如何為您的視覺效果設計登陸頁面。 每當視覺效果中沒有任何資料時,就會顯示登陸頁面。

注意

API 2.3.0 版和更新版本支援設計 Power BI 視覺效果登陸頁面。 若要了解您正在使用哪個版本,請檢查 pbiviz.json 檔案中的 apiVersion

建立登陸頁面

若要建立登陸頁面,必須在 capabilities.json 檔案中設定兩項功能。

  • 若要讓登陸頁面運作,請啟用 supportsLandingPage
  • 若要以檢視模式顯示登陸頁面,或即使在沒有任何資料角色模式時讓視覺效果互動,請啟用 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();
                }
        }
    }

格式化公用程式 (部分機器翻譯)