"Renderingshändelser" i visuella Power BI-objekt

För att få ett visuellt objekt certifierat måste det innehålla återgivningshändelser. Med de här händelserna kan lyssnare (främst exportera till PDF och exportera till PowerPoint) veta när det visuella objektet återges och när det är redo för export.

Viktigt!

Alla visuella objekt som exporterar data (till exempel till en PowerPoint- eller .pdf-fil ) måste innehålla återgivningshändelser för att säkerställa att exporten inte börjar innan det visuella objektet har slutfört renderingen.

API:et för renderingshändelser består av tre metoder som ska anropas under återgivningen:

  • renderingStarted: Den visuella Power BI-koden anropar renderingStarted metoden för att indikera att återgivningsprocessen startade. Den här metoden bör alltid vara den första raden i uppdateringsmetoden eftersom det är där renderingsprocessen börjar.

  • renderingFinished: När renderingen har slutförts anropar renderingFinished den visuella Power BI-koden metoden för att meddela lyssnarna att det visuella objektets bild är redo för export. Den här metoden bör vara den sista kodraden som körs när det visuella objektet uppdateras. Det är vanligtvis, men inte alltid, den sista raden i uppdateringsmetoden.

  • renderingFailed: Om ett problem uppstår under återgivningsprocessen renderas inte det visuella Power BI-objektet. Om du vill meddela lyssnarna att renderingsprocessen inte har slutförts ska den visuella Power BI-koden anropa renderingFailed metoden. Den här metoden innehåller också en valfri sträng för att ange en orsak till felet.

Kommentar

Renderingshändelser är ett krav för certifiering av visuella objekt. Utan dem godkänns inte ditt visuella objekt av Partnercenter för publicering. Mer information finns i certifieringskrav.

Så här använder du API:et för återgivningshändelser

Om du vill anropa återgivningsmetoderna måste du först importera dem från IVisualEventService.

  1. visual.ts Ta med raden i filen:

    import IVisualEventService = powerbi.extensibility.IVisualEventService;
    
  2. IVisual I klassen inkluderar du raden:

    private events: IVisualEventService;
    
  3. constructor I -metoden för IVisual klassen

    this.events = options.host.eventService;
    

Nu kan du anropa metoderna this.events.renderingStarted(options);, this.events.renderingFinished(options);och this.events.renderingFailed(options); när det är lämpligt i din uppdateringsmetod .

Exempel 1: Visuellt objekt utan animeringar

Här är ett exempel på ett enkelt visuellt objekt som använder API:et för återgivningshä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);
        }

Exempel 2: Visuellt objekt med animeringar

Om det visuella objektet har animeringar eller asynkrona funktioner för återgivning renderingFinished bör metoden anropas efter animeringen eller inuti asynkron funktion, även om det inte är den sista raden i uppdateringsmetoden .

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