LoginSignup
9
5

More than 1 year has passed since last update.

@PowerBIxyz(Takeshi Kagata)

Power BI workout - レポート テーマ

Last updated at Posted at 2022-04-16

デフォルト の レポートテーマ CY22SU03.json を ハック したので、続いて レポート テーマ の カスタマイズ を理解する。

レポート テーマ の カスタマイズ は必要最低限に。
ダイアログ による編集 + α くらいが目途。

レポート テーマにより、ビジュアル や レポート それぞれが持つ プロパティ の既定値を再定義する。ベース テーマ のうち必要な分だけ オーバーライド し、統一感を維持しながら ビジュアル などの個別設定を最小限にすることが目的。アクセシビリティ のことまではわからないし、その対応作業を担当することがない。とはいえ、可能な限り苦労を減らすことができるのかもしれないからね。

pbix ファイルの構成

  • *.pbix
    • Report
      • StaticResources
        • RegisteredResources
          • *.json (インポート された テーマ ファイル) 👈👈
          • イメージファイル(Canvas background: キャンバス の背景)
          • イメージファイル(Wallpaper: キャンバス 背後の背景)
        • SharedResources
          • BaseThemes
            • CY**SU**.json ( デフォルト の テーマ ファイル )
      • Layout ( レポート本体 )
    • [Content_Types].xml
    • DataModel ( データ本体 )
    • DiagramLayout
    • Metadata
    • SecurityBindings
    • Settings
    • Version

テーマ の カスタマイズ
レポート テーマのカスタマイズをしていなくても ベース テーマ による定義がされていて、これを オーバライド する テーマ ファイル を用意し適用することで レポート テーマ を カスタマイズ。

[View / 表示] → [Theme / テーマ] → [Customize current theme / 現在のテーマのカスタマイズ] → [Customize theme / テーマ の カスタマイズ] ダイアログ で多くのことはできるのだけど、これに頼れないこともある。
image.png

Customize theme / テーマ の カスタマイズ

Name and colors / 名前と色

Name and colors / 名前と色

Name / 名前
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Name and colors / 名前と色] → [Name and colors / 名前と色] → [Name / 名前]
唯一の必須プロパティ
image.png
[Apply / 適用] → [Save current theme / 現在のテーマを保存]

Custom theme file(JSON)
{
    "name": "Power BI workout"
}

保存した テーマ ファイルを [View / 表示] → [Theme / テーマ] → [ Browse for themes / テーマを参照] で インポート

image.png
カスタマイズ した テーマ ファイル を インポートしたものの ベース テーマ ファイル ( CY22SU03.json ) の内容を オーバーライド する定義はないので効果はない。

Theme color / テーマの色
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Name and colors / 名前と色] → [Name and colors / 名前と色] → [Theme color / テーマの色]

dataColors の先頭 8 要素として定義され、凡例 や パレット で利用される。

Sentiment colors / センチメント カラー
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Name and colors / 名前と色] → [Name and colors / 名前と色] → [Sentiment colors / センチメント カラー]

Divergent colors / 分岐の色
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Name and colors / 名前と色] → [Name and colors / 名前と色] → [Divergent colors / 分岐の色]

Advanced / 詳細

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Name and colors / 名前と色] → [Name and colors / 名前と色] → [Advanced / 詳細]
多くの テーマ ではそのままで充分なはず。テキスト クラス での色定義とあわせてよく考える。濃色を ベース にする テーマ では調整が必要。

PropertyName PropertyValue
First-level element
第 1 レベルの要素		 foreground #252423
Second-level element
第 2 レベルの要素		 foregroundNeutralSecondary #605E5C
Third-level element
第 3 レベルの要素		 backgroundLight #F3F2F1
Fourth-level element
第 4 レベルの要素		 foregroundNeutralTertiary #B3B0AD
Background element
背景の要素		 background #FFFFFF
Secondary background element
2 次背景要素		 backgroundNeutral #C8C6C4

Text / テキスト

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Text / テキスト]
この ダイアログ では、テキスト クラス の Primary class それぞれに対し、

  • Font family / フォント ファミリ
  • Font size / フォント サイズ
  • Font color / フォントの色

を カスタマイズ できる。
テキスト クラス には Primary class と Secondary class があるけれども、これらの間で継承が行われる。なので、すべてに対し定義が必要ということはなく、Primary class のカスタマイズで充分。

JSON class name: Primary class JSON class name: Secondary class
General
全般		 label semiboldLabel
largeLabel
smallLabel
lightLabel
boldLabel
largeLightLabel
smallLightLabel
Title
タイトル		 title largeTitle
Cards and KPIs
カードと KPI		 callout -
Tab headers
タブヘッダー		 header - 
{
  "textClasses": {
    "<ClassName>": {
      "<propertyName>": <propertyValue>,
      ...
    },
    ...
  }
}

レポートを表示する デバイス ごとで表示動作は異なるということは当然にある。

そもそも Power BI だけで解決できる出来事ではないから、できるだけという スタンス。

Font family / フォント ファミリ

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Text / テキスト]

Primary class Font family / フォント ファミリ
General / 全般 label Segoe UI
Title / タイトル title DIN
Cards and KPIs / カードと KPI callout DIN
Tab headers / タブ ヘッダー header Segoe UI Semibold

既定値(CY22SU03.json)はこの通り。フォントを変更したいという気持ちもわかるので、その手順。

image.png

  1. すべての テキスト クラス について、既定値の フォント ファミリ と異なる フォント ファミリを選択し、また既定値に戻す。これを繰り返す。
  2. [Apply / 適用] → [Save current theme / 現在のテーマを保存] する。

保存した テーマファイル(JSON) は次の通り。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "label": {
            "fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"
        },
        "callout": {
            "fontFace": "wf_standard-font, helvetica, arial, sans-serif"
        },
        "title": {
            "fontFace": "wf_standard-font, helvetica, arial, sans-serif"
        },
        "header": {
            "fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"
        }
    }
}

各 テキスト クラス の fontFace の値は、Power BI Service もしくは Power BI Desktop で利用される既定の font-family (CSS)。これらに表示に使用したい フォント ファミリ を追加すればよいし、表示に使用したいフォントの表示ができないデバイスのときはこれまで通りにするという算段。

例えば、Windows 10 (ja-JP) で追加された "UD デジタル 教科書体 NK-R" で表示したいとき、

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "label": {
            "fontFace": "'UD Digi Kyokasho NK-R', 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"
        },
        "callout": {
            "fontFace": "'UD Digi Kyokasho NK-R', wf_standard-font, helvetica, arial, sans-serif"
        },
        "title": {
            "fontFace": "'UD Digi Kyokasho NK-R', wf_standard-font, helvetica, arial, sans-serif"
        },
        "header": {
            "fontFace": "'UD Digi Kyokasho NK-R', 'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"
        }
    }
}

表示デバイスが認識できればよいので、'UD デジタル 教科書体 NK-R' と記述しても大丈夫だと思うけど。
image.png
該当の フォント を利用できる デバイス の場合、期待通りに表示される。
該当の フォント を利用できない デバイス の場合、これまで通り。

なお、visualStyles で すべてのビジュアルに対しと一括カスタマイズは可能だけれども、ビジュアル に定義されている要素名が異なることがあるし、フィルタ ペイン にも影響してしまう。なので、テキスト クラス による カスタマイズ が望ましいのだ。

Font size / フォント サイズ

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Text / テキスト]

JSON class name: Primary class
(CY22SU03.json)		 JSON class name: Secondary class
General
全般		 label (10 pt) semiboldLabel
largeLabel (Primary class * 6 / 5)
smallLabel (Primary class * 9 / 10)
lightLabel
boldLabel
largeLightLabel (Primary class * 6 / 5)
smallLightLabel (Primary class * 9 / 10)
Title
タイトル		 title (12 pt) largeTitle (Primary class * 7 / 6 pt)
Cards and KPIs
カードと KPI		 callout (45 pt) -
Tab headers
タブヘッダー		 header (12 pt) -
Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "label": {
            "fontSize": 14
        }
    }
}

label クラス の fontSize で 14 pt としたとき、smallLightLabel は 12.6 pt、 lightLabel / boldLabel は 14 pt
image.png

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "title": {
            "fontSize": 14
        }
    }
}

title クラス の fontSize で 14 pt としたとき、largeTitle は 16.3 pt
image.png

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "title": {
            "fontSize": 12
        },
        "largeTitle": {
            "fontSize": 14
        }
    }
}

と、Secondary class の fontSize も カスタマイズ することは可能。しかし、fontFace や color を明示的に指定しなければならないことがあるし、そもそもその必要があるのかどうか。

Font color / フォントの色

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Text / テキスト]
テキスト クラス の各 Primary class ごとに [Font color / フォントの色] を カスタマイズできるが、結果は思っているものと違うはず。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "textClasses": {
        "label": {
            "color": "#F2C811"
        },
        "title": {
            "color": "#F2C811"
        },
        "callout": {
            "color": "#F2C811"
        }
    }
}

image.png

label クラス より優先して適用される要素があるし、ビジュアル 独自で色を指定しているのもある。すべての フォント の色を変えるために使うものではないと考えてもよさそう。

Property name JSON property name
(CY22SU03.json)
First-Level elements
第 1 レベルの要素		 foreground
(#252423)
Second-Level elements
第 2 レベルの要素		 foregroundNeutralSecondary
(#605E5C)

テキスト クラスで色を指定しなければならないのは ダーク モード な テーマ にするときで、例えば すでに用意されている "Innovate" を参照してみるとよくわかる。

Property name Property value (Innovate)
foreground #FFFFFF
foregroundNeutralSecondary #D2D0CE
foregroundNeutralTertiary #979593
textClasses callout: #FFFFFF
title: #FFFFFF
header: #FFFFFF
label: #FFFFFF

だけど、Slicer と Multi-row Card の フォント の 色が適用できてないのもわかるはず。
image.png
では、こういう時どうするかというと、visualStyles で個別に定義することになる。必要あればだけど。

Visuals / ビジュアル

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Visuals / ビジュアル]

キャンバスに配置する ビジュアル それぞれの既定値を定義であって、ビジュアル ごとの定義ではない。ビジュアル に共通するプロパティについての定義するといった感じ。

  • Background / 背景
    • Color / カラー
    • Transparency / 透過性
  • Border / 罫線
    • On || Off / オン || オフ
    • Color / カラー
    • Radius / 半径
  • Header / ヘッダー
    • Background color / 背景色
    • Border color / 枠線の色
    • Transparency / 透過性
    • Icon color / アイコンの色
  • Tooltip / ツールヒント
    • Label text color / ラベルのテキストの色
    • Value text color / 値のテキストの色
    • (Modern tooltips のみ) Drill text and icon color / ドリル テキストとアイコンの色
    • Background color / 背景色

並べて見ると "カラー" だったり "色" だったりするんだね。まぁ一度に見るわけじゃないからいいけど。

"visualStyles": {
    "<visualName>": {
        "<styleName>": {
            "<cardName>": [
                {
                    "<propertyName>": <propertyValue>
                }
            ]
        }
    }
}

テーマ ファイルの visualStyles セクションは

  • visualName : ビジュアル タイプ
    • styleName : ビジュアル スタイル (未実装)
      • cardName : カード
        • Properties : プロパティ

という構成になっていて、visualName / styleName / cardName は "*" を any として定義可能だけど、むやみに使わない。強力すぎる最終奥義はできれば秘密のままで。

Background / 背景

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Visuals / ビジュアル] → [Background / 背景]
ビジュアル の 罫線内側の背景色を Color / カラー: #FFFFFF Transparency / 透過性: 0 % としたとき、キャンバスの色 #FFFFFF 透過性: 100 % が一緒に定義される。この定義がないと、すべての ビジュアル タイプ の定義に page が含まれてしまい、ビジュアル と キャンバス の背景色が同じになってしまうから。別セクションの [Page / ページ] → [Page background / ページの背景] で指定されていればそのまま。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        },
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 100
                    }
                ]
            }
        }
    }
}

ビジュアル の 罫線内側の背景色を Color / カラー: #F2C811 Transparency / 透過性: 0 % としたとき、

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#F2C811"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        },
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 100
                    }
                ]
            }
        }
    }
}

image.png
Total の背景色が抜けるね。ちょっとイケてないかも。と思ったら、テーマ ファイルのカスタマイズでは対応できないものとしてさっさと考えを切り替える。ここで無理しなくてもいい。なんとかできなくもないけど。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#F2C811"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        },
        "tableEx": {
            "*": {
                "total": [
                    {
                        "totals": true,
                        "backColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    }
                ]
            }
        },
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 100
                    }
                ]
            }
        }
    }
}
visualName styleName cardName property
* * background color
transparency

Border / 罫線

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Visuals / ビジュアル] → [Border / 罫線]
ビジュアル の Border / 罫線: ON Color: #000000, 角の丸め: 0 pt と設定するとすべての ビジュアル で Border が表示される。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "border": [
                    {
                        "color": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "show": true,
                        "radius": 0
                    }
                ]
            }
        }
    }
}

なので、適用しない ビジュアル については、"show": false とするか、適用する ビジュアル だけ "show": true にする。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "border": [
                    {
                        "color": {
                            "solid": {
                                "color": "#F2C811"
                            }
                        },
                        "show": true,
                        "radius": 5
                    }
                ]
            }
        },
        "tableEx": {
            "*": {
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        }
    }
}
visualName styleName cardName property
* * border show
color
radius

Header / ヘッダー

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Visuals / ビジュアル] → [Header / ヘッダー]

ちょっと わかりにくいけど ビジュアル の Header icons / ヘッダー アイコン のこと。
image.png
背景色: #FFFFFF 前景色: #252423 透過性: 0 % 罫線の色: #FFFFFF としたとき

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "visualHeader": [
                    {
                        "background": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "foreground": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "transparency": 0,
                        "border": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    }
                ]
            }
        }
    }
}

すべての ビジュアル で Header icons / ヘッダー アイコン を非表示とする定義は可能だけれども、[レポート の設定]で制御することも検討したほうがいい。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "visualHeader": [
                    {
                        "show": false
                    }
                ]
            }
        }
    }
}

アイコンごとの表示非表示も カスタム レポート テーマ で設定可能。必要ならばね。

visualName styleName cardName propertyName
* * visualHeader show
background
foreground
transparency
border
showTooltipButton
showFilterRestatementButton
showOptionsMenu
showSeeDataLayoutToggleButton
showFocusModeButton
showPinButton
showDrillDownExpandButton
showDrillDownLevelButton
showDrillToggleButton
showDrillUpButton
showDrillRoleSelector
showVisualErrorButton
showVisualWarningButton
showVisualInformationButton
showPersonalizeVisualButton

Tooltip / ツールヒント

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Visuals / ビジュアル] → [Tooltip / ツールヒント]

Modern visual tooltips

image.png
テキスト クラス / カラー クラス から継承するので調整が必要な時だけで。

Property Color class
Label : themedTitleFontColor
Value : themedValueFontColor
Drill text and icon : actionFontColor		 foreground
Background : themedBackground background
separator line and hover color backgroundNeutral
Property Text class
themedTitleFontColor
themedValueFontColor
actionFontColor		 label
Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "visualTooltip": [
                    {
                        "themedTitleFontColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "themedValueFontColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "themedBackground": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "actionFontColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        }
                    }
                ],
                "visualHeaderTooltip": [
                    {
                        "themedTitleFontColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "themedBackground": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    }
                ]
            }
        }
    }
}
visualName styleName cardName propertyName
* * visualTooltip themedTitleFontColor
themedValueFontColor
themedBackground
actionFontColor
* * visualHeaderTooltip themedTitleFontColor
themedBackground

Visual tooltips

従来の Visual tooltips は テキスト クラス / カラー クラス から継承しない個別設定

背景色(background)が #333333 なので、透過性(transparency) 5 %

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "visualTooltip": [
                    {
                        "titleFontColor": {
                            "solid": {
                                "color": "#C8C8C8"
                            }
                        },
                        "valueFontColor": {
                            "solid": {
                                "color": "#EAEAEA"
                            }
                        },
                        "background": {
                            "solid": {
                                "color": "#333333"
                            }
                        },
                        "transparency": 5
                    }
                ],
                "visualHeaderTooltip": [
                    {
                        "titleFontColor": {
                            "solid": {
                                "color": "#C8C8C8"
                            }
                        },
                        "background": {
                            "solid": {
                                "color": "#333333"
                            }
                        }
                    }
                ]
            }
        }
    }
}
visualName styleName cardName propertyName
* * visualTooltip titleFontColor
valueFontColor
background
transparency
* * visualHeaderTooltip titleFontColor
background

Page / ページ

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Page / ページ]

  • Wallpaper / 壁紙
    • Color / カラー
    • Transparency / 透過性
  • Page backgroud / ページの背景
    • Color / カラー
    • Transparency / 透過性

Wallpaper / 壁紙

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Page / ページ] → [Wallpaper / 壁紙]

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "page": {
            "*": {
                "outspace": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    }
}
visualName styleName cardName property
page * outspace color
transparency
image{ "name": <name>, "url": <url>, "image": <imageScalingType>}
url で Data URLs 埋め込み可
imageScalingType: ["Normal", "Fit", "Fill"]

Page backgroud / ページの背景

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Page / ページ] → [Page background / ページの背景]

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 100
                    }
                ]
            }
        }
    }
}
visualName styleName cardName property
page * background color
transparency
image{ "name": <name>, "url": <url>, "image": <imageScalingType>}
url で Data URLs 埋め込み可
imageScalingType: ["Normal", "Fit", "Fill"]

Filter pane / フィルター ウィンドウ

[Customize theme / テーマ の カスタマイズ] ダイアログ → [Filter pane / フィルター ウィンドウ] → [Filter pane / フィルター ウィンドウ]
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Filter pane / フィルター ウィンドウ] → [Available filter cards / 使用可能なフィルター カード]
[Customize theme / テーマ の カスタマイズ] ダイアログ → [Filter pane / フィルター ウィンドウ] → [Applied filter cards / 適用されたフィルター カード]

テキスト クラス / カラー クラス から継承はないので個別設定

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "outspacePane": [
                    {
                        "backgroundColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 0,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "titleSize": 12,
                        "headerSize": 9,
                        "checkboxAndApplyColor": {
                            "solid": {
                                "color": "#F2C811"
                            }
                        }
                    }
                ],
                "filterCard": [
                    {
                        "$id": "Applied",
                        "backgroundColor": {
                            "solid": {
                                "color": "#F3F2F1"
                            }
                        },
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "textSize": 9,
                        "transparency": 0
                    },
                    {
                        "$id": "Available",
                        "backgroundColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "textSize": 9,
                        "transparency": 0
                    }
                ]
            }
        }
    }
}
visualName styleName cardName property
* * outspacePane fontFamily
titleSize
foregroundColor
inputBoxColor
headerSize
searchTextSize
border
borderColor
backgroundColor
transparency
width
checkboxAndApplyColor
* * filterCard "$id": "Available"
fontFamily
textSize
foregroundColor
inputBoxColor
border
borderColor
backgroundColor
transparency
"$id": "Applied"
fontFamily
textSize
foregroundColor
inputBoxColor
border
borderColor
backgroundColor
transparency
Custom theme file(JSON)
{
    "name": "Power BI workout",
    "visualStyles": {
        "*": {
            "*": {
                "outspacePane": [
                    {
                        "fontFamily": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
                        "titleSize": 12,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "inputBoxColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "headerSize": 9,
                        "searchTextSize": 9,
                        "border": true,
                        "borderColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "backgroundColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 0,
                        "width": 200,
                        "checkboxAndApplyColor": {
                            "solid": {
                                "color": "#F2C811"
                            }
                        }
                    }
                ],
                "filterCard": [
                    {
                        "$id": "Available",
                        "fontFamily": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
                        "textSize": 9,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "inputBoxColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "border": true,
                        "borderColor": {
                            "solid": {
                                "color": "#C8C8C8"
                            }
                        },
                        "backgroundColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "transparency": 0
                    },
                    {
                        "$id": "Applied",
                        "fontFamily": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
                        "textSize": 9,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "inputBoxColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "border": true,
                        "borderColor": {
                            "solid": {
                                "color": "#C8C8C8"
                            }
                        },
                        "backgroundColor": {
                            "solid": {
                                "color": "#F3F2F1"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    }
}

テーマ カラー から要素の色を定義

dataColor で定義されている要素のうち、先頭から 8 色が パレット に追加されていて、 ColorId と Percent(明度) による要素への色の定義も可能。

ColorId 0 は #FFFFFF、ColorId 1 は #000000 なので、ColorId 2 以降が割り当てられる。

Custom theme file(JSON)
{
    "name": "Power BI workout",
    "dataColors": [
        "#118DFF",
        "#12239E",
        "#E66C37",
        "#6B007B",
        "#E044A7",
        "#744EC2",
        "#D9B300",
        "#D64550"
    ],
    "visualStyles": {
        "barChart": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": {
                                    "expr": {
                                        "ThemeDataColor": {
                                            "ColorId": 2,
                                            "Percent": 0.6
                                        }
                                    }
                                }
                            }
                        }
                    }
                ]
            }
        }
    }
}
Color pallet ColorId Percent R G B
#A0D1FF, Theme color 1, 60 % lighter 2 0.6 160 209 255
#70BBFF, Theme color 1, 40 % lighter 2 0.4 112 187 255
#41A4FF, Theme color 1, 20 % lighter 2 0.2 65 164 255
#118DFF, Theme color 1 2 0 17 141 255
#0D6ABF, Theme color 1, 25 % darker 2 -0.25 13 106 191
#094780, Theme color 1, 50 % darker 2 -0.5 9 71 128

思ったこと🙄

*.pbix ファイル を ハック すればもっと詳細に定義できる可能性はあるけれども、必要があるのかどうかって感じ。

その他

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
5