เพิ่มหน้าเริ่มต้นไปยังวิชวล Power BI ของคุณ

หน้าเริ่มต้นของวิชวล Power BI สามารถแสดงข้อมูลในการ์ดวิชวล Power BI ของคุณก่อนที่การ์ดจะได้รับข้อมูล หน้าเริ่มต้นของวิชวลสามารถแสดง:

• ข้อความที่อธิบายวิธีการใช้วิชวล
• ลิงก์ไปยังเว็บไซต์ของคุณ
• ลิงก์ไปยังวิดีโอ

บทความนี้อธิบายวิธีการออกแบบหน้าเริ่มต้นสําหรับวิชวลของคุณ หน้าเริ่มต้นจะปรากฏขึ้นเมื่อใดก็ตามที่วิชวลไม่มีข้อมูลอยู่

หมายเหตุ

การออกแบบหน้าเริ่มต้นของวิชวล Power BI ได้รับการสนับสนุนใน API เวอร์ชัน 2.3.0 หรือสูงกว่า เมื่อต้องการตรวจสอบเวอร์ชันที่คุณกําลังใช้ ให้ตรวจสอบ apiVersion ในไฟล์ pbiviz.json

การสร้างเพจเริ่มต้น

เมื่อต้องการสร้างเพจเริ่มต้น ต้องตั้งค่าความสามารถสองอย่างใน capabilities.json ไฟล์

• เพื่อให้เพจเริ่มต้นทํางาน ให้เปิดใช้งานsupportsLandingPage
• เพื่อให้เพจเริ่มต้นแสดงในโหมดมุมมอง หรือเพื่อให้วิชวลสามารถโต้ตอบได้แม้ในขณะที่ไม่มีโหมดบทบาทข้อมูล ให้เปิดใช้งานsupportsEmptyDataView

    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

ตัวอย่างของวิชวลที่มีหน้าเริ่มต้น

รหัสต่อไปนี้แสดงวิธีการเพิ่มหน้าเริ่มต้นไปยังวิชวลแผนภูมิแท่ง

export class BarChart implements IVisual {
    //...
    private element: HTMLElement;
    private isLandingPageOn: boolean;
    private LandingPageRemoved: boolean;
    private LandingPage: d3.Selection<any>;

    constructor(options: VisualConstructorOptions) {
            //...
            this.element = options.element;
            //...
    }

    public update(options: VisualUpdateOptions) {
    //...
        this.HandleLandingPage(options);
    }

    private HandleLandingPage(options: VisualUpdateOptions) {
        if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
            if(!this.isLandingPageOn) {
                this.isLandingPageOn = true;
                const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
                this.element.appendChild(SampleLandingPage);
                this.LandingPage = d3.select(SampleLandingPage);
            }

        } else {
                if(this.isLandingPageOn && !this.LandingPageRemoved){
                    this.LandingPageRemoved = true;
                    this.LandingPage.remove();
                }
        }
    }

เนื้อหาที่เกี่ยวข้อง

ยูทิลิตี้การจัดรูปแบบ