เหตุการณ์ "การแสดงผล" ในวิชวล Power BI

เพื่อให้ได้ วิชวลที่ผ่านการรับรอง จะต้องมี เหตุการณ์การแสดงผลด้วยภาพ เหตุการณ์เหล่านี้ช่วยให้ผู้ฟัง (ส่วนใหญ่ ส่งออกเป็น PDF และ ส่งออกไปยัง PowerPoint) ทราบว่าเมื่อใดที่จะแสดงภาพและเมื่อพร้อมสําหรับการส่งออก

สำคัญ

วิชวลใดก็ตามที่ส่งออกข้อมูล (ตัวอย่างเช่น ไปยังไฟล์ PowerPoint หรือ .pdf ) ต้องมีเหตุการณ์การแสดงผลเพื่อให้แน่ใจว่าการส่งออกไม่ได้เริ่มต้นก่อนการแสดงผลเสร็จสิ้นของวิชวล

API เหตุการณ์การแสดงผลประกอบด้วยสามวิธีการที่ควรเรียกใช้ระหว่างการแสดงผล:

  • renderingStarted: รหัสวิชวล Power BI เรียกใช้ renderingStarted เมธอด เพื่อระบุว่ากระบวนการแสดงผลได้เริ่มต้นแล้ว วิธีนี้ควรเป็นบรรทัดแรกของวิธีอัปเดตเนื่องจากเป็นจุดที่กระบวนการแสดงผลเริ่มต้นขึ้น

  • renderingFinished: เมื่อการแสดงผลเสร็จสมบูรณ์ รหัสวิชวล Power BI จะ renderingFinished เรียกใช้เมธอด เพื่อแจ้งตัวรอรับการติดต่อว่ารูปภาพของวิชวลพร้อมสําหรับการส่งออกแล้ว วิธีนี้ควรเป็นบรรทัดสุดท้ายของ โค้ดที่ดําเนินการ เมื่อวิชวลอัปเดต โดยปกติแล้วจะเป็นบรรทัดสุดท้ายของวิธีอัปเดต แต่ไม่เสมอไป

  • renderingFailed: ถ้าเกิดปัญหาขึ้นระหว่างกระบวนการแสดงผล วิชวล Power BI จะไม่แสดงผลสําเร็จ หากต้องการแจ้งตัวรอรับการติดต่อว่ากระบวนการแสดงผลยังไม่เสร็จสมบูรณ์ โค้ดวิชวล Power BI ควรเรียกใช้ renderingFailed เมธอด นอกจากนี้ เมธอดนี้ยังมีสตริงที่เลือกได้เพื่อระบุเหตุผลสําหรับความล้มเหลว

หมายเหตุ

เหตุการณ์การแสดงผลเป็นข้อกําหนดสําหรับใบรับรองวิชว ล หากไม่มีวิชวลของคุณจะไม่ได้รับการอนุมัติจาก Partner Center สําหรับการเผยแพร่ สําหรับข้อมูลเพิ่มเติม ดู ข้อกําหนดของใบรับรอง

วิธีการใช้ API เหตุการณ์การแสดงผล

หากต้องการเรียกใช้วิธีการแสดงผลคุณต้องนําเข้าจาก IVisualEventService ก่อน

  1. ในไฟล์ของคุณ visual.ts ให้รวมบรรทัด:

    import IVisualEventService = powerbi.extensibility.IVisualEventService;
    
  2. ใน IVisual คลาส ให้รวมบรรทัดต่อไปนี้

    private events: IVisualEventService;
    
  3. constructorในวิธีการ ของIVisualคลาส

    this.events = options.host.eventService;
    

ตอนนี้คุณสามารถเรียกใช้วิธีการ this.events.renderingStarted(options);, , และ this.events.renderingFailed(options); ตามความเหมาะสมในวิธีการอัปเดตของคุณthis.events.renderingFinished(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 เมธอด ควรถูกเรียกหลังจากภาพเคลื่อนไหวหรือภายในฟังก์ชันอะซิงโครนัสแม้ว่าจะไม่ใช่บรรทัดสุดท้ายของ วิธีอัปเดต ก็ตาม

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