เพิ่มการจัดรูปแบบตามเงื่อนไข
การจัดรูปแบบ ตามเงื่อนไขช่วยให้ผู้สร้างรายงานระบุวิธีการแสดงสีในรายงานตามค่าตัวเลข
บทความนี้อธิบายวิธีการเพิ่มฟังก์ชันการจัดรูปแบบตามเงื่อนไขไปยังวิชวล Power BI ของคุณ
ในขณะนี้ การจัดรูปแบบตามเงื่อนไขสามารถนําไปใช้กับสีได้เท่านั้น
เพิ่มการจัดรูปแบบตามเงื่อนไขไปยังโครงการของคุณ
ส่วนนี้แสดงวิธีการเพิ่มการจัดรูปแบบตามเงื่อนไขไปยังวิชวล Power BI ที่มีอยู่ โค้ดตัวอย่างในบทความนี้จะยึดตามวิชวล SampleBarChart คุณสามารถตรวจสอบรหัสแหล่งที่มาได้ใน barChart.ts
เพิ่มรายการการจัดรูปแบบสีตามเงื่อนไขในบานหน้าต่างการจัดรูปแบบ
ในส่วนนี้ คุณจะเรียนรู้วิธีการเพิ่มรายการการจัดรูปแบบสีตามเงื่อนไข ไปยังจุดข้อมูลในบานหน้าต่างการจัดรูปแบบ
propertyInstanceKind
ใช้อาร์เรย์ ในVisualObjectInstance
ซึ่งแสดงโดยpowerbi-visuals-api
ตรวจสอบว่าไฟล์ของคุณมีการนําเข้านี้:import powerbiVisualsApi from "powerbi-visuals-api";
หากต้องการระบุชนิดของการจัดรูปแบบที่เหมาะสม (ค่าคงที่ ค่าคงที่หรือกฎ หรือกฎ) ให้ใช้
VisualEnumerationInstanceKinds
enum เพิ่มการนําเข้าต่อไปนี้ไปยังไฟล์ของคุณ:import VisualEnumerationInstanceKinds = powerbiVisualsApi.VisualEnumerationInstanceKinds;
ตั้งค่าชนิดอินสแตนซ์ของคุณสมบัติการจัดรูปแบบ
เมื่อต้องการจัดรูปแบบคุณสมบัติที่สนับสนุนการจัดรูปแบบตามเงื่อนไข ให้ตั้งค่าชนิดอินสแตนซ์ที่จําเป็นใน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 การจัดรูปแบบตามเงื่อนไข
กําหนดลักษณะการทํางานของการจัดรูปแบบตามเงื่อนไข
กําหนดวิธีการจัดรูปแบบที่นําไปใช้กับจุดข้อมูลของคุณ
การใช้ 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 }
}
}
}
);
// ...
}
ข้อควรพิจารณาและข้อจำกัด
การจัดรูปแบบตามเงื่อนไขไม่ได้รับการสนับสนุนสําหรับวิชวลต่อไปนี้:
วิชวลตามตาราง
วิชวลตามเมทริกซ์
เราขอแนะนําว่าคุณไม่ควรใช้การจัดรูปแบบตามเงื่อนไขกับชุดข้อมูล แต่คุณควรอนุญาตให้ลูกค้าจัดรูปแบบแต่ละชุดข้อมูลทีละชุด ทําให้ง่ายต่อการแยกความแตกต่างระหว่างชุดข้อมูลด้วยภาพ วิชวลแบบนอกกรอบส่วนใหญ่ที่มีชุดข้อมูล แชร์วิธีการนี้