次の方法で共有

条件付き書式を追加する

  • [アーティクル]

条件付き書式設定を使用すると、レポートの作成者は数値に従って、レポート上での色の表示方法を指定できます。

この記事では、Power BI 視覚化に条件付き書式機能を追加する方法について説明します。

条件付き書式は、次のプロパティの型にのみ適用できます。

  • Color
  • Text
  • アイコン
  • Web URL

条件付き書式をプロジェクトに追加する

このセクションでは、既存の Power BI 視覚化に条件付き書式を追加する方法について説明します。 この記事のサンプル コードは、SampleBarChart 視覚エフェクトに基づいています。 barChart.ts のソース コードを調べることができます。

[書式] ウィンドウに条件付きの色の書式設定エントリを追加する

このセクションでは、[書式] ペイン内のデータ ポイントに、条件付きの色の書式設定エントリを追加する方法について説明します。

  1. VisualObjectInstance 内の propertyInstanceKind 配列を使用します。これは powerbi-visuals-api によって公開されています。 ファイルに次のインポートが含まれていることを確認します。

    import powerbiVisualsApi from "powerbi-visuals-api";

  2. 適切な種類の書式設定 (Constant、ConstantOrRule、または Rule) を指定するには、VisualEnumerationInstanceKinds 列挙型を使用します。 次のインポートをファイルに追加します。

    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 で標準色のボタンの横に表示される [条件付き書式] ボタンのスクリーンショット。

条件付き書式の動作方法を定義する

書式設定がデータ ポイントに適用される方法を定義します。

powerbi-visuals-utils-dataviewutils の下で宣言された createDataViewWildcardSelector を使用して、条件付き書式をインスタンス、合計、またはその両方に適用するかどうかを指定します。 詳細については、「DataViewWildcard」を参照してください。

条件付き書式を適用するプロパティに対して、次の変更を行います。

  • selector 値を dataViewWildcard.createDataViewWildcardSelector(dataViewWildcardMatchingOption) 呼び出しに置き換えます。 DataViewWildcardMatchingOption によって、条件付き書式をインスタンス、合計、またはその両方に適用するかどうかを定義します。

  • selector プロパティ用に以前に定義した値を使用して、altConstantValueSelector プロパティを追加します。

条件付き書式をサポートするプロパティを書式設定するには、その 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