レポートの色とモードショーケースをカスタマイズする

Power BI 埋め込み テーマ API は、カラー パレットやその他のスタイルを定義し、Power BI レポートに適用します。 テーマ機能を使用して、さまざまなレポート ユーザーにカスタマイズされたテーマを適用したり、ユーザーが自分の外観を選択したりします。

Power BI 埋め込み分析プレイグラウンドの [レポートの色とモードのカスタマイズ] ショーケースでは、テーマ API を使用して、ユーザーが Power BI 埋め込み分析レポートを表示するときにさまざまな色と背景モードを選択できます。

ショーケース レポートでは、テーマ機能を使用して次の手順を実行します。

• レポートの色テーマと背景モードを定義します。
• レポートの読み込みに特定の色のテーマを適用します。
• ユーザーがレポート表示セッション中にテーマと背景モードを変更できるようにします。

レポート テーマの詳細については、「Power BI Desktopでレポート テーマを使用する」を参照してください。

テーマ ショーケースエクスペリエンス

[レポートの色とモードのカスタマイズ] ショーケースでは、Contoso という名前の架空の複合企業が Power BI 埋め込みレポートを使用して、関係者にビジネス データを表示します。 埋め込みレポートは、 既定 の色テーマと既定の背景モードが適用された状態で読み込まれます。 レポート内のすべてのビジュアルでは、テーマの色が使用されます。

テーマとモードを選択する

レポート ビューアーは、[ テーマの選択 ] ボタンを選択して、別の色のテーマまたはモードを適用できます。 [ テーマの選択 ] ドロップダウン ボックスが開き、使用可能なテーマ名とカラー パレットが一覧表示され、現在のテーマが選択されています。

閲覧者は、リストから別のテーマを選択し、データ、ラベル、およびその他の要素の色の即時の変更を確認できます。 選択したテーマは、レポート内のすべての埋め込みビジュアルに影響します。

また、ビューアーは ダーク モード を切り替えて、色のテーマの選択に関係なく、明るい色のテキストで暗いレポートの背景を生成することもできます。

[ テーマの選択] をもう一度選択すると、ドロップダウン ボックスが閉じます。 選択した新しいテーマと背景モードは、ビューアーが再度変更しない限り、レポート表示セッション中に有効なままです。

テーマショーケースコード

ショーケース アプリケーションを実装するためのコードは、 PowerBI-Embedded-Showcases GitHub リポジトリにあります。

• HTML ページでは、レポート コンテナーと [テーマの選択] ボタンとダイアログ ボックスがビルドされ、テーマの JSON オブジェクトが読み込まれます。

• レポート JavaScript は、レポートを埋め込み、既定のテーマを読み込み、テーマ切り替えエクスペリエンスを実装します。

レポート テーマ JSON オブジェクトを使用してテーマを定義する

レポート テーマの JSON オブジェクトを使用して、ほぼすべての Power BI 書式設定要素をカスタマイズできます。 ショーケース themes.js ファイルは、使用可能なカラー テーマの jsonDataColors 名前とプロパティを指定するオブジェクトを定義します。

次 jsonDataColors のオブジェクトは、ショーケース Tidal テーマを定義します。 アスタリスク * は、レポート内のすべてのビジュアルにグローバルに設定を適用します。

const jsonDataColors = [
    ...
{
    "name": "Tidal",
    "dataColors": ["#094782", "#0B72D7", "#098BF5", "#54B5FB", "#71C0A7", "#57B956", "#478F48", "#326633"],
    "tableAccent": "#094782",
    "visualStyles": {
        "*": {
            "*": {
                "background": [{ "show": true, "transparency": 3 }],
                "visualHeader": [{
                    "foreground": { "solid": { "color": "#094782" } },
                    "transparency": 3
                }]
            }
        },
        "group": { "*": { "background": [{ "show": false }] } },
        "basicShape": { "*": { "background": [{ "show": false }] } },
        "image": { "*": { "background": [{ "show": false }] } },
        "page": {
            "*": {
                "background": [{ "transparency": 100 }],
            }
        }
    }
}
    ...
]

レポート テーマ JSON オブジェクト ファイルの形式とプロパティの詳細については、「 レポート テーマの JSON ファイル形式」を参照してください。

背景モードを定義する

themes.js ファイルには、明るい背景モードと濃色の背景モードを記述するオブジェクトも定義themesされています。 明るい背景モードと濃色の背景モードを themes 定義するために、オブジェクトは白い背景を持つテーマと、対照的な濃色の背景を持つ別のテーマを指定します。 また、暗い背景オブジェクトは、他の構造色とテキスト色の値を設定して、暗い背景に対して表示されるようにします。

埋め込み構成でテーマを適用し、applyTheme

showcase themeJson パラメーターは、いくつかの色テーマを定義します。 埋め込みレポート JavaScript では、Report クラス applyTheme メソッドを使用して、レポートの読み込みとレポート実行時にテーマを適用します。

テーマを有効にするために、レポート埋め込み構成では、テーマ JSON オブジェクトを指すパラメーターをthemeJson使用して属性を指定themeします。 ショーケース埋め込み構成では、レポートの Default 読み込み時に、データ色 ID を 0持つテーマが適用されます。

let config = {
    ...
    theme: { themeJson: jsonDataColors[0] },
    };

セッション中にビューアーが別のテーマまたはモードを選択した場合、 applyTheme 関数は 、選択したデータの色とモードに基づいて新しいテーマ オブジェクトを定義して適用します。 次のコードは、showcase applyTheme 関数を示しています。

async function applyTheme() {

    // Get active data-color ID
    activeDataColorId = Number($("input[name=data-color]:checked", "#theme-dropdown")[0].getAttribute("id").slice(-1));

    // Get the theme state from the slider toggle
    let activeThemeSlider = $("#theme-slider").get(0);

    // Get the index of the theme based on the state of the slider
    // 1 => Dark theme
    // 0 => Light theme
    const themeId = (activeThemeSlider.checked) ? 1 : 0;

    // Create new theme object
    let newTheme = {};

    // Append the data colors and the mode
    $.extend(newTheme, jsonDataColors[activeDataColorId], themes[themeId]);

    // Apply the theme to the report
    await themesShowcaseState.themesReport.applyTheme({ themeJson: newTheme });
}

次の手順

• レポートテーマを適用する
• Power BI Embedded Analytics プレイグラウンド