[Power BI] SVGで独自グラフを作ろう②：メジャーの値で変化する棒グラフ

ひな形を作る

とりあえずひな形を作ります。以下のメジャーを新規に追加してください。前回作成したSVGをVARで定義し直して、RETURNで返す形にしただけです。

対前年実績比図 2-1 = 
// SVGの定義
VAR s_SVG = 
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='5' width='50' height='15' style='fill:#4B8975;'/>
</svg>"

RETURN s_SVG

追加したら、こちらも前回と同じく「対前年実績比図」メジャーを選択した状態でメジャーツール > データカテゴリ > 画像のURLにします。

これでSVGが画像として表示されました。

SVGの長方形のwidthをパラメーターに差し替える

ステップバイステップで1つずつ理解しながら進みましょう。先ほどのメジャーを以下のように修正します。修正箇所は「width」に渡す値をVARで外で定義して、SVGの該当箇所に差し替えただけです。

対前年実績比図 2-2 = 

// メジャー値の取得
VAR s_CY_Act = 50

// SVGの定義
VAR s_SVG = 
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='5' width='" & s_CY_Act & "' height='15' style='fill:#4B8975;'/>
</svg>"

RETURN s_SVG

無事、同じチャートが描画できることを確認してください。
これで、SVGにパラメーターを動的に渡す方法がわかりました。数字を別途取得して、それを文字列としてのSVGに差し替えればよいだけです。これは色についても同じで、「#4B8975」についてもVARを使用して同様の差し替えが可能です。

widthに売上の値を代入する

今度は「売上」メジャーの値に応じて変化するグラフにします。S_CY_Actを[売上]メジャーにしただけです。

対前年実績比図 2-3 = 

// メジャー値の取得
VAR s_CY_Act = [売上]

// SVGの定義
VAR s_SVG = 
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='5' width='" & s_CY_Act & "' height='15' style='fill:#4B8975;'/>
</svg>"

RETURN s_SVG

結果が変わりませんね。

実はこれは既定の画像イメージのサイズを超過しているためです。画像のサイズを変更するには、マトリクス・ビジュアルをクリックし、視覚化 > ビジュアル > 画像のサイズを変更します。こちらで「幅(px)」の値を｢110｣に変更します。

「rect」の「x」の値が5です。これは左側からの開始位置の座標で、棒グラフの最大長を100pxとすると左から合計105pxになります。これに余裕を持たせて110pxとしています。

すると、以下のようにグラフが長くなりました。

ただし、すべての行で同じ長さであるため、売上の値を反映していないように見えます。これは例えば、2024年でいえば売上が「74,013,780」であるためwidthの値が「画像のサイズ」の最大長110を振り切っているためです。実際にはｘは5から始まっているので、105を振り切ると見切れてしまいます。

このため、最大値を基準とした相対的なwidthの調整が必要となります。今回はいったん「74,013,780」を100 px となるように調整してみます。メジャーを以下のように書き換えます。

対前年実績比図 2-4 = 

// メジャー値の取得
VAR s_CY_Act_Max = 74013780
VAR s_CY_Act = DIVIDE([売上], s_CY_Act_Max) * 100

// SVGの定義
VAR s_SVG = 
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='5' width='" & s_CY_Act & "' height='15' style='fill:#4B8975;'/>
</svg>"

RETURN s_SVG

これで「売上」の値に応じて長さが変わる棒グラフが準備できました。

ただし、今回は最大値をハードコーディングしています。
ここは本来はMAXX関数で行って、集計単位ごとに動的に都度最大値を取得するのが正解です。動的な最大値の取得と対前年比較は次回の記事で紹介します。