[画面] グラフコントロールを使って予算消化率を可視化する

整えたデータをもとに、現場の予算消化率や進捗を一目で把握できるダッシュボードのUIを構築します。
Power Appsには標準でいくつかのグラフコントロールが用意されており、これらをうまく活用することで直感的な画面を作ることができます。

グラフコントロールの基本設定

ステップ1でみせた「材料費予算消化率」テーブルを使い、「工場ごとの材料費予算消化率」を棒グラフで作成します。
※リスト名はダッシュボードサンプルリストにしています

1. データ > データの追加 > コネクタ > SharePointから、作成したリストを選択します。
2. 挿入 > グラフ > 縦棒グラフを選択します。
3. CompositeColumnChartの作成を確認後、その中のColumnChartを選択し、ディスプレイ > 選択から追加したデータソースを選択します。
4. Titleはディスプレイ > テキストに材料費予算消化率を入力します。

Itemsプロパティの設定

標準グラフコントロールは、与えられたテーブルのデータをそのまま描画します。
特定のデータをグラフ化するため、Itemsプロパティでデータをフィルタリングします。

1. ColumnChartの詳細設定 > Itemsに下記を入力します。

Filter('ダッシュボードサンプルリスト', 予算項目.Value = "材料費")

LabelsとSeries（系列）の設定

軸ラベル（X軸）と系列データ（Y軸にプロットする数値）を設定します。

1. ディスプレイ > グリッドスタイルをすべて、マーカーをオフ、項目の間隔を10、系列の数を2、Xラベルの角度は0にします。
2. 詳細設定 > LabelはFactory、Series1はBudget、Series2はExecutedにします。

工場ごとの「予算額（Budget）」と「執行済額（Executed）」が横に並んだ棒グラフが完成です。
視覚的にどの工場が予算に迫っているかが一目でわかるようになります。

標準グラフコントロールの限界

Power Appsの標準グラフコントロールは手軽な反面、いくつかの中級者向けの壁が存在します。

色ごとの細かい設定が難しい

系列ごとの色は ItemColorSet プロパティ配列で指定できます。
ですが、条件（予算を超えたら赤にするなど）によって棒の色を動的に変えることは、標準グラフではサポートされていません。

複雑な集計機能を持たない

グラフコントロール自体にデータを合計する機能（Group By）はありません。
複数レコードを工場ごとにまとめる場合、グラフに渡す前にコレクションなどで集計する必要があります。

標準グラフコントロールの工夫

独自の横棒グラフを作る

予算消化率（%）を表現する場合、標準の円グラフを使うのが一般的です。
ギャラリーコントロールと図形（四角形）を組み合わせると、横棒グラフを自作できます。

1. 垂直ギャラリーを配置し、標準で生成されるラベルなどのコントロールを削除します。
2. ギャラリー内に図形 > 四角形を配置し、横幅いっぱいまで伸ばし（ギャラリーと横幅を同一にする）、色をグレーにします。
3. 図形 > 四角形を再度配置し、Widthに下記を入力します。
   ※Rectangle2はグレーにした四角形のコントロール名

(ThisItem.Executed / ThisItem.Budget) * Rectangle2.Width

4. ギャラリー内にラベルを追加し、左上に配置、フォントの色を白、FontWeightをFontWeight.Bold、TextはThisItem.タイトルにします。
5. 項番4のラベルコントロールをコピーして複製し、Textを(ThisItem.Executed / ThisItem.Budget) * 100 & "%"にします。

管理IDごとに予算消化率に応じた長さのゲージを表現でき、さらには「条件付き書式」の設定が可能になります。

次のステップでは、この自作ゲージなどを活用し、「異常値」を色で知らせる条件付き書式について解説します。