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

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 メソッドを使用して、レポートの読み込みとレポート実行時にテーマを適用します。

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

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

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