แชร์ผ่าน

เพิ่มการสนับสนุนของบุ๊กมาร์กไปยังวิชวลในรายงาน Power BI

  • บทความ

ด้วยบุ๊กมาร์กรายงานของ Power BI คุณสามารถจับภาพและบันทึกมุมมองที่กําหนดค่าไว้ของหน้ารายงานได้ จากนั้นคุณสามารถกลับไปยังมุมมองที่บันทึกไว้ได้อย่างรวดเร็วและง่ายดายเมื่อใดก็ตามที่คุณต้องการ บุ๊กมาร์กจะบันทึกการกําหนดค่าทั้งหมด รวมถึงการเลือกและตัวกรอง

สําหรับข้อมูลเพิ่มเติมเกี่ยวกับบุ๊กมาร์ก โปรดดูใช้บุ๊กมาร์กเพื่อแชร์ข้อมูลเชิงลึกและสร้างเรื่องราวใน Power BI

วิชวลที่สนับสนุนบุ๊กมาร์ก

วิชวล Power BI ที่สนับสนุนบุ๊กมาร์กจะต้องสามารถบันทึกและให้ข้อมูลที่ถูกต้องเมื่อจําเป็น ถ้าวิชวลของคุณโต้ตอบกับวิชวลอื่น ๆ เลือกจุดข้อมูล หรือกรองวิชวลอื่น ๆ คุณจําเป็นต้องบันทึกสถานะที่คั่นหน้าไว้ในคุณสมบัติ filterState ของวิชวล

หมายเหตุ

การสร้างวิชวลที่สนับสนุนบุ๊กมาร์กจําเป็นต้องใช้:

  • Powerbi-visuals-utils-interactivityutils เวอร์ชัน 3.0.0 หรือใหม่กว่าสําหรับวิชวลตัวกรองและวิชวลใด ๆ ที่ใช้InteractivityService
  • API วิชวลเวอร์ชัน 1.11.0 หรือใหม่กว่าสําหรับวิชวลที่ไม่ใช่ตัวกรองที่ใช้SelectionManagerแทนInteractivityService
  • เมื่อต้องการตรวจสอบเวอร์ชันที่คุณกําลังใช้ ให้ตรวจสอบ apiVersion ในไฟล์ pbiviz.json

วิธีการที่วิชวล Power BI โต้ตอบกับ Power BI ในบุ๊กมาร์กรายงาน

สมมติว่าคุณต้องการสร้างบุ๊กมาร์กหลายรายการบนหน้ารายงานโดยแต่ละบุ๊กมาร์กมีจุดข้อมูลที่แตกต่างกันที่เลือก

ก่อนอื่น ให้เลือกจุดข้อมูลอย่างน้อยหนึ่งรายการในวิชวลของคุณ วิชวลจะส่งผ่านการเลือกของคุณไปยังโฮสต์ จากนั้นเลือก เพิ่ม ในบานหน้าต่าง บุ๊กมาร์ก Power BI จะบันทึกการเลือกปัจจุบันสําหรับบุ๊กมาร์กใหม่

ทําสิ่งนี้หลายครั้งเพื่อสร้างบุ๊กมาร์กใหม่ หลังจากที่คุณสร้างบุ๊กมาร์กแล้ว คุณสามารถสลับไปมาระหว่างไฟล์เหล่านั้นได้

แต่ละครั้งที่คุณเลือกบุ๊กมาร์ก Power BI จะคืนค่าตัวกรองหรือสถานะตัวเลือกที่บันทึกไว้และส่งผ่านไปยังวิชวล วิชวลในรายงานจะถูกไฮไลต์หรือกรองตามสถานะที่จัดเก็บไว้ในบุ๊กมาร์ก เมื่อต้องการคืนค่าสถานะที่ถูกต้อง วิชวลของคุณต้องส่งผ่านสถานะตัวเลือกที่ถูกต้องไปยังโฮสต์ (ตัวอย่างเช่น สีของจุดข้อมูลที่แสดง)

สถานะตัวเลือกใหม่ (หรือตัวกรอง) จะสื่อสารผ่าน options.jsonFilters คุณสมบัติ ใน update เมธอด jsonFiltersสามารถเป็น Advanced Filter หรือTuple Filter

  • ถ้าวิชวลของคุณมีจุดข้อมูลที่เลือก ให้รีเซ็ตการเลือกเป็นบุ๊กมาร์กที่เลือกโดยใช้ฟังก์ชันregisterOnSelectCallbackการเรียกกลับ ในISelectionManager
  • ถ้าวิชวลของคุณใช้ตัวกรองเพื่อเลือกข้อมูล ให้ รีเซ็ตค่าตัวกรอง เป็นค่าที่สอดคล้องกันของบุ๊กมาร์กที่เลือก

วิชวลที่มีการเลือก

หากวิชวลของคุณโต้ตอบกับวิชวลอื่นโดยใช้ ตัวเลือก คุณสามารถเพิ่มการสนับสนุนบุ๊กมาร์กได้ในหนึ่งในสองวิธี:

  • ผ่าน InteractivityService เพื่อจัดการการเลือก ใช้applySelectionFromFilter วิธีนี้เป็นวิธีที่ง่ายและต้องการ
  • ผ่าน SelectionManager ถ้าวิชวลของคุณไม่ใช้ InteractivityService

ใช้ InteractivityService เพื่อคืนค่าการเลือกบุ๊กมาร์ก

ถ้าวิชวลของคุณใช้ InteractivityService คุณไม่จําเป็นต้องมีการดําเนินการอื่น ๆ เพื่อสนับสนุนบุ๊กมาร์กในวิชวลของคุณ

เมื่อคุณเลือกบุ๊กมาร์ก ยูทิลิตี้จะจัดการสถานะตัวเลือกของวิชวลโดยอัตโนมัติ

ใช้ SelectionManager เพื่อคืนค่าการเลือกบุ๊กมาร์ก

ถ้าคุณไม่ได้ใช้ InteractivityServiceคุณสามารถบันทึกและเรียกคืนการเลือกบุ๊กมาร์กได้โดยใช้ ISelectionManager.registerOnSelectCallback วิธีการ ดังต่อไปนี้:

เมื่อคุณเลือกบุ๊กมาร์ก Power BI จะ callback เรียกใช้เมธอด ของวิชวลที่มีตัวเลือกที่สอดคล้องกัน

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        //called when a selection was set by Power BI
    });
);

สมมติว่าคุณสร้างจุดข้อมูลใน เมธอด visualTransform ของวิชวลของคุณ

มีลักษณะ datapoints ดังนี้:

visualDataPoints.push({
    category: categorical.categories[0].values[i],
    color: getCategoricalObjectValue<Fill>(categorical.categories[0], i, 'colorSelector', 'fill', defaultColor).solid.color,
    selectionId: host.createSelectionIdBuilder()
        .withCategory(categorical.categories[0], i)
        .createSelectionId(),
    selected: false
});

ตอนนี้คุณมี visualDataPoints เป็นจุดข้อมูลของคุณและ ids อาร์เรย์ ที่ส่งผ่านไปยัง callback ฟังก์ชัน

ในขั้นตอนนี้ วิชวลควรเปรียบเทียบ ISelectionId[] อาร์เรย์ที่มีตัวเลือกในอาร์เรย์ ของคุณ visualDataPoints จากนั้นทําเครื่องหมายจุดข้อมูลที่สอดคล้องกันตามที่เลือกไว้

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        visualDataPoints.forEach(dataPoint => {
            ids.forEach(bookmarkSelection => {
                if (bookmarkSelection.equals(dataPoint.selectionId)) {
                    dataPoint.selected = true;
                }
            });
        });
    });
);

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

วิชวลที่มีตัวกรอง

เมื่อต้องการสนับสนุนบุ๊กมาร์กในวิชวลที่มีตัวกรอง ให้ใช้InteractivityService

สมมติว่าวิชวลสร้างตัวกรองข้อมูลตามช่วงวันที่ คุณมี startDate และ endDate เป็นวันที่เริ่มต้นและสิ้นสุดของช่วง

วิชวลสร้างตัวกรองขั้นสูงและเรียกใช้เมธอด applyJsonFilter โฮสต์เพื่อกรองข้อมูลตามเงื่อนไขที่เกี่ยวข้อง

เป้าหมายคือตารางที่ใช้สําหรับการกรอง

import { AdvancedFilter } from "powerbi-models";

const filter: IAdvancedFilter = new AdvancedFilter(
    target,
    "And",
    {
        operator: "GreaterThanOrEqual",
        value: startDate
            ? startDate.toJSON()
            : null
    },
    {
        operator: "LessThanOrEqual",
        value: endDate
            ? endDate.toJSON()
            : null
    });

this.host.applyJsonFilter(
    filter,
    "general",
    "filter",
    (startDate && endDate)
        ? FilterAction.merge
        : FilterAction.remove
);

แต่ละครั้งที่คุณเลือกบุ๊กมาร์ก วิชวลแบบกําหนดเองจะมีการ update เรียกใช้

ใน update วิธีการ วิชวลจะตรวจสอบตัวกรองในวัตถุ:

const filter: IAdvancedFilter = FilterManager.restoreFilter(
    && options.jsonFilters
    && options.jsonFilters[0] as any
) as IAdvancedFilter;

filterถ้าวัตถุไม่เป็น null วิชวลจะคืนค่าเงื่อนไขตัวกรองจากวัตถุ:

const jsonFilters: AdvancedFilter = this.options.jsonFilters as AdvancedFilter[];

if (jsonFilters
    && jsonFilters[0]
    && jsonFilters[0].conditions
    && jsonFilters[0].conditions[0]
    && jsonFilters[0].conditions[1]
) {
    const startDate: Date = new Date(`${jsonFilters[0].conditions[0].value}`);
    const endDate: Date = new Date(`${jsonFilters[0].conditions[1].value}`);

    // apply restored conditions
} else {
    // apply default settings
}

หลังจากนั้น วิชวลจะเปลี่ยนสถานะภายในให้ตรงกับเงื่อนไขปัจจุบัน สถานะภายในประกอบด้วยออบเจ็กต์จุดข้อมูลและการแสดงภาพ (เส้น สี่เหลี่ยม และอื่นๆ)

สำคัญ

ในสถานการณ์ของบุ๊กมาร์กรายงานด้านบน วิชวลไม่ควรเรียกใช้ applyJsonFilter เพื่อกรองวิชวลอื่น ๆ วิชวลเหล่านั้นจะถูกกรองโดย Power BI อยู่แล้ว

วิ ชวลตัว แบ่งข้อมูลเส้นเวลาจะเปลี่ยนตัวเลือกช่วงเพื่อให้สอดคล้องกับช่วงข้อมูล

บันทึกสถานะตัวกรองของวิชวล

นอกเหนือจากการบันทึกเงื่อนไขของตัวกรองสําหรับบุ๊กมาร์กแล้ว คุณยังสามารถบันทึกลักษณะตัวกรองอื่น ๆ ได้

ตัวอย่างเช่น ตัว แบ่งข้อมูลเส้นเวลาจะ Granularity จัดเก็บค่าคุณสมบัติเป็นสถานะตัวกรอง ซึ่งช่วยให้กรานูลาริตี้ของไทม์ไลน์ (วัน เดือน ปี ฯลฯ) จะเปลี่ยนแปลงเมื่อคุณเปลี่ยนบุ๊กมาร์ก

คุณสมบัติ filterState จะบันทึกลักษณะตัวกรองเป็นคุณสมบัติ วิชวลสามารถจัดเก็บค่าต่าง ๆ filterState ในบุ๊กมาร์กได้

เมื่อต้องการบันทึกค่าคุณสมบัติเป็นสถานะตัวกรอง ให้ตั้งค่าคุณสมบัติวัตถุเป็น "filterState": true ในแฟ้ม capabilities.json

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