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 apiVersionpbiviz.json-tiedostosta .

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

Liittyvä sisältö

Muotoilun apuohjelmat