แชร์ผ่าน

เพิ่มการจัดรูปแบบตามเงื่อนไข

  • บทความ

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

บทความนี้อธิบายวิธีการเพิ่มฟังก์ชันการจัดรูปแบบตามเงื่อนไขไปยังวิชวล Power BI ของคุณ

การจัดรูปแบบตามเงื่อนไขสามารถนําไปใช้กับชนิดคุณสมบัติต่อไปนี้เท่านั้น:

  • สี
  • ข้อความ
  • ไอคอน
  • URL ของเว็บ

เพิ่มการจัดรูปแบบตามเงื่อนไขไปยังโครงการของคุณ

ส่วนนี้แสดงวิธีการเพิ่มการจัดรูปแบบตามเงื่อนไขไปยังวิชวล Power BI ที่มีอยู่ โค้ดตัวอย่างในบทความนี้จะยึดตามวิชวล SampleBarChart คุณสามารถตรวจสอบรหัสแหล่งที่มาได้ใน barChart.ts

เพิ่มรายการการจัดรูปแบบสีตามเงื่อนไขในบานหน้าต่างการจัดรูปแบบ

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

  1. propertyInstanceKindใช้อาร์เรย์ ใน VisualObjectInstanceซึ่งแสดงโดยpowerbi-visuals-api ตรวจสอบว่าไฟล์ของคุณมีการนําเข้านี้:

    import powerbiVisualsApi from "powerbi-visuals-api";

  2. หากต้องการระบุชนิดของการจัดรูปแบบที่เหมาะสม (ค่าคงที่ ค่าคงที่หรือกฎ หรือกฎ) ให้ใช้ VisualEnumerationInstanceKinds enum เพิ่มการนําเข้าต่อไปนี้ไปยังไฟล์ของคุณ:

    import VisualEnumerationInstanceKinds = powerbiVisualsApi.VisualEnumerationInstanceKinds;

  3. ตั้งค่าชนิดอินสแตนซ์ของคุณสมบัติการจัดรูปแบบ

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

 public getFormattingModel(): powerbi.visuals.FormattingModel {
    // ...
    formattingGroup.slices.push(
        {
            uid: `colorSelector${barDataPoint_indx}_uid`,
            displayName: barDataPoint.category,
            control: {
                type: powerbi.visuals.FormattingComponent.ColorPicker,
                properties: {
                    descriptor: {
                        objectName: "colorSelector",
                        propertyName: "fill",                
                        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals),
                        altConstantValueSelector: barDataPoint.selectionId.getSelector(),
                        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule // <=== Support conditional formatting
                    },
                    value: { value: barDataPoint.color }
                }
            }
        }
    );
    // ...
 }

VisualEnumerationInstanceKinds.ConstantOrRule สร้างรายการ UI การจัดรูปแบบตามเงื่อนไขควบคู่ไปกับองค์ประกอบ UI การจัดรูปแบบตามเงื่อนไข

สกรีนช็อตของปุ่มการจัดรูปแบบตามเงื่อนไขตามที่ปรากฏใน Power BI ถัดจากปุ่มสีปกติ

กําหนดลักษณะการทํางานของการจัดรูปแบบตามเงื่อนไข

กําหนดวิธีการจัดรูปแบบที่นําไปใช้กับจุดข้อมูลของคุณ

การใช้ createDataViewWildcardSelector ที่ประกาศภายใต้ powerbi-visuals-utils-dataviewutilsระบุว่าจะใช้การจัดรูปแบบตามเงื่อนไขกับอินสแตนซ์ ผลรวม หรือทั้งสองอย่าง สําหรับข้อมูลเพิ่มเติม ให้ดู DataViewWildcard

ทําการเปลี่ยนแปลงต่อไปนี้กับคุณสมบัติที่คุณต้องการใช้การจัดรูปแบบตามเงื่อนไขเพื่อ:

  • แทนที่ค่า selector ด้วยการ dataViewWildcard.createDataViewWildcardSelector(dataViewWildcardMatchingOption) เรียกใช้ DataViewWildcardMatchingOption จะกําหนดว่าการจัดรูปแบบตามเงื่อนไขจะนําไปใช้กับอินสแตนซ์ ผลรวม หรือทั้งสองอย่าง

  • altConstantValueSelectorเพิ่มคุณสมบัติ ด้วยค่าที่กําหนดไว้ก่อนหน้านี้สําหรับselectorคุณสมบัติ

สําหรับคุณสมบัติการจัดรูปแบบที่สนับสนุนการจัดรูปแบบตามเงื่อนไข ให้ตั้งค่าประเภทอินสแตนซ์ที่จําเป็นในdescriptor

 
 public getFormattingModel(): powerbi.visuals.FormattingModel {
    // ...

    formattingGroup.slices.push(
        {
            uid: `colorSelector${barDataPoint_indx}_uid`,
            displayName: barDataPoint.category,
            control: {
                type: powerbi.visuals.FormattingComponent.ColorPicker,
                properties: {
                    descriptor: {
                        objectName: "colorSelector",
                        propertyName: "fill",                
                        // Define whether the conditional formatting will apply to instances, totals, or both
                        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals),

                        // Add this property with the value previously defined for the selector property
                        altConstantValueSelector: barDataPoint.selectionId.getSelector(),

                        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
                    },
                    value: { value: barDataPoint.color }
                }
            }
        }
    );

    // ...
 }

ข้อควรพิจารณาและข้อจำกัด

การจัดรูปแบบตามเงื่อนไขไม่ได้รับการสนับสนุนสําหรับวิชวลต่อไปนี้:

  • วิชวลตามตาราง

  • วิชวลตามเมทริกซ์

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

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

DataViewUtils