向 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();
                }
        }
    }

后续步骤

格式化 utils