Power BI 시각적 개체의 "렌더링" 이벤트

시각적 개체의 인증을 받으려면 렌더링 이벤트를 포함해야 합니다. 이러한 이벤트를 통해 수신기(주로 PDF로 내보내기 및 PowerPoint로 내보내기)는 시각적 개체를 렌더링할 때와 내보낼 준비가 되었을 때를 알 수 있습니다.

렌더링 이벤트 API는 렌더링 중에 호출해야 다음 세 가지 메서드로 구성됩니다.

• renderingStarted: Power BI 시각적 개체 코드에서 renderingStarted 메서드를 호출하여 렌더링 프로세스가 시작되었음을 알립니다. 이 메서드는 항상 update 메서드의 첫 번째 줄에 있어야 합니다. 이 위치에서 렌더링 프로세스가 시작되기 때문입니다.

• renderingFinished: 렌더링이 성공적으로 완료되면 Power BI 시각적 개체 코드는 renderingFinished 메서드를 호출하여 시각적 개체의 이미지를 내보낼 준비가 되었음을 수신기에 알립니다. 이 메서드는 시각적 개체를 업데이트할 때 실행되는 코드의 마지막 줄이어야 합니다. 일반적으로는 update 메서드의 마지막 줄에 있지만 항상 그렇지는 않습니다.

• renderingFailed: 렌더링 프로세스 중에 문제가 발생하면 Power BI 시각적 개체가 성공적으로 렌더링되지 않습니다. 렌더링 프로세스가 완료되지 않았음을 수신기에 알리려면 Power BI 시각적 코드가 renderingFailed 메서드를 호출해야 합니다. 이 메서드는 실패 이유를 나타내는 선택적 문자열도 제공합니다.

렌더링 이벤트 API를 사용하는 방법

렌더링 메서드를 호출하려면 먼저 IVisualEventService에서 메서드를 가져와야 합니다.

1. visual.ts 파일에 다음 줄을 포함합니다.

   import IVisualEventService = powerbi.extensibility.IVisualEventService;
   

2. IVisual 클래스에 다음 줄을 포함합니다.

   private events: IVisualEventService;
   

3. IVisual 클래스의 constructor 메서드

   this.events = options.host.eventService;
   

이제 update 메서드에서 적절한 경우 this.events.renderingStarted(options);, this.events.renderingFinished(options); 및 this.events.renderingFailed(options); 메서드를 호출할 수 있습니다.

예제 1: 애니메이션이 없는 시각적 개체

다음은 렌더링 이벤트 API를 사용하는 간단한 시각적 개체의 예입니다.

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

예제 2: 애니메이션이 있는 시각적 개체

시각적 개체에 렌더링을 위한 애니메이션 또는 비동기 함수가 있는 경우 renderingFinished 메서드는 update 메서드의 마지막 줄이 아닌 경우에도 애니메이션 또는 내부 비동기 함수 다음에 호출해야 합니다.

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

관련 콘텐츠

• 시각적 개체 API
• Power BI 시각적 개체 인증받기