Menambahkan pemformatan bersyarat

Pemformatan bersyarat memungkinkan pembuat laporan menentukan bagaimana warna ditampilkan dalam laporan, menurut nilai numerik.

Artikel ini menjelaskan cara menambahkan fungsionalitas pemformatan bersyarat ke visual Power BI Anda.

Saat ini, pemformatan bersyarat hanya dapat diterapkan ke warna.

Menambahkan pemformatan bersyarat ke proyek Anda

Bagian ini menunjukkan cara menambahkan pemformatan bersyarat ke visual Power BI yang sudah ada. Contoh kode dalam artikel ini didasarkan pada visual SampleBarChart. Anda dapat memeriksa kode sumber di barChart.ts.

Menambahkan entri pemformatan warna bersyarat di panel format

Di bagian ini Anda mempelajari cara menambahkan entri pemformatan warna bersyarat, ke titik data di panel format.

1. propertyInstanceKind Gunakan array di VisualObjectInstance, yang diekspos oleh powerbi-visuals-api. Verifikasi bahwa file Anda menyertakan impor ini:

   import powerbiVisualsApi from "powerbi-visuals-api";
   

2. Untuk menentukan jenis pemformatan yang sesuai (Konstanta, ConstantOrRule, atau Aturan), gunakan VisualEnumerationInstanceKinds enum. Tambahkan impor berikut ke file Anda:

   import VisualEnumerationInstanceKinds = powerbiVisualsApi.VisualEnumerationInstanceKinds;
   

3. Mengatur jenis instans properti pemformatan

metode getFormattingModel API

Untuk memformat properti yang mendukung pemformatan bersyarat, atur jenis instans yang diperlukan di .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 }
                }
            }
        }
    );
    // ...
 }

metode API enumerateObjectInstances - tidak digunakan lagi

Cantumkan semua properti yang ingin Anda dukung pemformatan bersyarat, di bawah propertyInstanceKind array. Tentukan properti ini dalam metode enumerateObjectInstances.

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        …
        case 'colorSelector':
            …
                objectEnumeration.push({
                    objectName: objectName,
                    displayName: barDataPoint.category,
                    properties: {
                        fill: {
                            solid: {
                                color: barDataPoint.color
                            }
                        }
                    },
                    selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals),
                    altConstantValueSelector: barDataPoint.selectionId.getSelector(),

                    // List your conditional formatting properties
                    propertyInstanceKind: {
                        fill: VisualEnumerationInstanceKinds.ConstantOrRule
                    }
                });
            }
        …
}

VisualEnumerationInstanceKinds.ConstantOrRule membuat entri antarmuka pengguna pemformatan bersyarat bersama elemen antarmuka pengguna pemformatan konstan.

Menentukan perilaku pemformatan bersyarat

Tentukan bagaimana pemformatan diterapkan ke titik data Anda.

Menggunakan createDataViewWildcardSelector dideklarasikan di bawah powerbi-visuals-utils-dataviewutils, tentukan apakah akan menerapkan pemformatan bersyarat ke instans, total, atau keduanya. Untuk informasi selengkapnya, lihat DataViewWildcard.

Buat perubahan berikut pada properti yang ingin Anda terapkan pemformatan bersyaratnya:

• Ganti nilai selector dengan panggilan dataViewWildcard.createDataViewWildcardSelector(dataViewWildcardMatchingOption). DataViewWildcardMatchingOption menentukan apakah pemformatan bersyarat diterapkan ke instans, total, atau keduanya.

• Tambahkan properti altConstantValueSelector dengan nilai yang sebelumnya ditentukan untuk properti selector.

metode getFormattingModel API

Untuk memformat properti yang mendukung pemformatan bersyarat, atur jenis instans yang diperlukan di 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 }
                }
            }
        }
    );

    // ...
 }
    

metode API enumerateObjectInstances - tidak digunakan lagi

Cantumkan semua properti yang ingin mendukung pemformatan bersyarat di propertyInstanceKind bawah array. Tentukan properti ini dalam metode enumerateObjectInstances.

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        …
        case 'colorSelector':
            …
                objectEnumeration.push({
                    objectName: objectName,
                    displayName: barDataPoint.category,
                    properties: {
                        fill: {
                            solid: {
                                color: barDataPoint.color
                            }
                        }
                    },
                    // 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(),

                    propertyInstanceKind: {
                        fill: VisualEnumerationInstanceKinds.ConstantOrRule
                    }
                });
            }
        …
}

Pertimbangan dan batasan

Pemformatan bersyarat tidak didukung untuk visual berikut:

• Visual berbasis tabel

• Visual berbasis matriks

Kami menyarankan agar Anda tidak menggunakan pemformatan bersyarat dengan seri. Sebagai gantinya, izinkan pelanggan untuk memformat setiap seri satu per satu, sehingga mudah untuk membedakan secara visual antar seri. Sebagian besar visual siap pakai dengan seri berbagi pendekatan ini.

Konten terkait

DataViewUtils