Del via

"Gengivelseshændelser" i Power BI-visualiseringer

  • Artikel

Hvis du vil have en visualisering certificeret, skal den indeholde gengivelseshændelser. Disse hændelser giver lyttere (primært eksportér til PDF og eksport til PowerPoint) besked om, hvornår visualiseringen gengives, og hvornår den er klar til eksport.

Vigtigt

Alle visualiseringer, der eksporterer data (f.eks. til en PowerPoint- eller .pdf-fil ), skal indeholde gengivelseshændelser for at sikre, at eksporten ikke starter, før visualiseringen er færdig med at blive gengivet.

API'en til gengivelseshændelser består af tre metoder, der skal kaldes under gengivelsen:

  • renderingStarted: Power BI-visualiseringskoden kalder renderingStarted metoden for at angive, at gengivelsesprocessen startede. Denne metode skal altid være den første linje i opdateringsmetoden, da det er her, gengivelsesprocessen starter.

  • renderingFinished: Når gengivelsen er fuldført, kalder renderingFinished Power BI-visualiseringskoden metoden for at give lytterne besked om, at visualiseringens billede er klar til eksport. Denne metode skal være den sidste kodelinje, der udføres, når visualiseringen opdateres. Det er normalt, men ikke altid, den sidste linje i opdateringsmetoden.

  • renderingFailed: Hvis der opstår et problem under gengivelsesprocessen, gengives Power BI-visualiseringen ikke korrekt. Hvis du vil give lytterne besked om, at gengivelsesprocessen ikke blev fuldført, skal power BI-visualiseringskoden kalde renderingFailed metoden. Denne metode indeholder også en valgfri streng til at angive en årsag til fejlen.

Bemærk

Gengivelseshændelser er et krav for certificering af visualiseringer. Uden dem bliver din visualisering ikke godkendt af Partnercenter til publicering. Du kan få flere oplysninger under Certificeringskrav.

Sådan bruger du API'en til gengivelseshændelser

Hvis du vil kalde gengivelsesmetoderne, skal du først importere dem fra IVisualEventService.

  1. Medtag linjen i filen visual.ts :

    import IVisualEventService = powerbi.extensibility.IVisualEventService;

  2. I klassen IVisual skal du inkludere linjen:

    private events: IVisualEventService;

  3. constructor I metoden for IVisual klassen

    this.events = options.host.eventService;

Du kan nu kalde metoderne this.events.renderingStarted(options);, this.events.renderingFinished(options);og this.events.renderingFailed(options); , hvor det er relevant, i din opdateringsmetode .

Eksempel 1: Visualisering uden animationer

Her er et eksempel på en simpel visualisering, der bruger API'en for gengivelseshændelser.

    export class Visual implements IVisual {
        ...
        private events: IVisualEventService;
        ...

        constructor(options: VisualConstructorOptions) {
            ...
            this.events = options.host.eventService;
            ...
        }

        public update(options: VisualUpdateOptions) {
            this.events.renderingStarted(options);
            ...
            this.events.renderingFinished(options);
        }

Eksempel 2: Visualisering med animationer

Hvis visualiseringen har animationer eller asynkrone funktioner til gengivelse, renderingFinished skal metoden kaldes efter animationen eller i asynkron funktion, selvom det ikke er den sidste linje i opdateringsmetoden .

    export class Visual implements IVisual {
        ...
        private events: IVisualEventService;
        private element: HTMLElement;
        ...

        constructor(options: VisualConstructorOptions) {
            ...
            this.events = options.host.eventService;
            this.element = options.element;
            ...
        }

        public update(options: VisualUpdateOptions) {
            this.events.renderingStarted(options);
            ...
            // Learn more at https://github.com/d3/d3-transition/blob/master/README.md#transition_end
            d3.select(this.element).transition().duration(100).style("opacity","0").end().then(() => {
                // renderingFinished called after transition end
                this.events.renderingFinished(options);
            });
        }

Relateret indhold