Udostępnij za pośrednictwem

Zdarzenia renderowania w wizualizacjach usługi Power BI

  • Artykuł

Aby uzyskać certyfikat wizualizacji, musi zawierać zdarzenia renderowania. Te zdarzenia pozwalają odbiornikom (przede wszystkim eksportować do formatu PDF i eksportować do programu PowerPoint) wiedzieć, kiedy wizualizacja jest renderowana i kiedy jest gotowa do eksportu.

Ważne

Każda wizualizacja, która eksportuje dane (na przykład do pliku programu PowerPoint lub .pdf ), musi zawierać zdarzenia renderowania, aby upewnić się, że eksport nie rozpoczyna się przed zakończeniem renderowania wizualizacji.

Interfejs API zdarzeń renderowania składa się z trzech metod, które powinny być wywoływane podczas renderowania:

  • renderingStarted: Kod wizualizacji usługi Power BI wywołuje metodę renderingStarted , aby wskazać, że proces renderowania został uruchomiony. Ta metoda powinna zawsze być pierwszym wierszem metody update, ponieważ jest to miejsce, w którym rozpoczyna się proces renderowania.

  • renderingFinished: Po pomyślnym zakończeniu renderowania kod wizualizacji usługi Power BI wywołuje metodę renderingFinished w celu powiadomienia odbiorników, że obraz wizualizacji jest gotowy do eksportu. Ta metoda powinna być ostatnim wierszem kodu wykonywanym podczas aktualizacji wizualizacji. Zazwyczaj jest to, ale nie zawsze, ostatni wiersz metody update.

  • renderingFailed: Jeśli podczas renderowania wystąpi problem, wizualizacja usługi Power BI nie zostanie pomyślnie renderowana. Aby powiadomić odbiorniki, że proces renderowania nie został ukończony, kod wizualizacji usługi Power BI powinien wywołać metodę renderingFailed . Ta metoda udostępnia również opcjonalny ciąg, aby podać przyczynę błędu.

Uwaga

Zdarzenia renderowania są wymagane do certyfikacji wizualizacji. Bez nich wizualizacja nie zostanie zatwierdzona przez Centrum partnerskie do publikacji. Aby uzyskać więcej informacji, zobacz wymagania dotyczące certyfikacji.

Jak używać interfejsu API zdarzeń renderowania

Aby wywołać metody renderowania, należy najpierw zaimportować je z usługi IVisualEventService.

  1. visual.ts W pliku dołącz wiersz:

    import IVisualEventService = powerbi.extensibility.IVisualEventService;

  2. IVisual W klasie znajduje się wiersz:

    private events: IVisualEventService;

  3. W metodzie constructor IVisual klasy

    this.events = options.host.eventService;

Teraz można wywołać metody this.events.renderingStarted(options);, , i this.events.renderingFailed(options); tam, gdzie jest to odpowiednie w metodzie updatethis.events.renderingFinished(options);.

Przykład 1. Wizualizacja bez animacji

Oto przykład prostej wizualizacji korzystającej z interfejsu API zdarzeń renderowania.

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

Przykład 2. Wizualizacja z animacjami

Jeśli wizualizacja ma animacje lub funkcje asynchroniczne do renderowania, renderingFinished metoda powinna być wywoływana po animacji lub wewnątrz funkcji asynchronicznej, nawet jeśli nie jest to ostatni wiersz metody aktualizacji .

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

Powiązana zawartość