Aloitussivun lisääminen Power BI:n visualisointiin
Power BI -visualisoinnin aloitussivu voi näyttää tietoja Power BI:n visualisointikortissa ennen kuin kortti noutaa tietoja. Visualisoinnin aloitussivu voi näyttää:
- Teksti, jossa kerrotaan, miten visualisointia käytetään.
- Linkki sivustoosi.
- Linkki videoon.
Tässä artikkelissa kerrotaan, miten voit suunnitella visualisoinnin aloitussivun. Aloitussivu tulee näkyviin, kun visualisoinnissa ei ole tietoja.
Muistiinpano
Power BI -visualisoinnin aloitussivun suunnittelua tuetaan ohjelmointirajapinnan versiossa 2.3.0 ja uudemmat. Jos haluat tietää, mitä versiota käytät, tarkista apiVersion pbiviz.json .
Saapumissivun luominen
Jotta voit luoda aloitussivun, tiedostoon capabilities.json on määritettävä kaksi ominaisyyttä.
- Jotta aloitussivu toimisi, ota käyttöön
supportsLandingPage. - Jos haluat, että aloitussivu näytetään tarkastelutilassa tai että visualisointi on vuorovaikutteinen, vaikka tietoroolitilaa ei olisi, ota käyttöön
supportsEmptyDataView.
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Esimerkki visualisoinnista, jossa on aloitussivu
Seuraava koodi näyttää, miten aloitussivu voidaan lisätä palkkikaaviovisualisointiin.
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();
}
}
}