將登陸頁面新增至 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();
}
}
}
相關內容
格式化公用程式 (部分機器翻譯)