PowerApps│融通の利く棒グラフを作成する方法

PowerAppsは標準でGraphコントロールが搭載されています。もちろん棒グラフも作成できるのですが、如何せん設計の幅が少なすぎて融通が利きません。

そこで、Galleryコントロールと図形を使って様々な棒グラフを作成してみました。

この手法なら、グラフの色や形、配置を自由に設定できます。

見栄えの良いものはそれだけで情報が伝わり、評価も良いので是非試してみてください。

グラフの作成は簡単ですが、データソースの構成は考えないといけません。PowerBIは試したことがありませんが、アプリ内にグラフを組み込めるようです。

今回作成するグラフは多層構造とサイズや座標を求めるために数学知識を使います。

はい、少し苦手意識が生まれたと思います。

ご安心ください、多層構造はこのあと図を用いて解説します。

数学といっても四則演算に毛が生えたレベルですし、最悪コピペでも動きます。

この仕組みを理解いただければグラフ表現の幅が広がるので是非習得してください。

以降、コピペできるコードはサンプルコレクションの使用を想定しています。うまく動作しない場合は調整してください。サンプルコレクションを使う場合は、下記記事にある_GraphCollection01を適当なButtonコントロールにコピペし、実行してください。

Contents

• 1 01│グラフ描写領域と算出
• 2 02│棒グラフの作成
• 3 外枠用Containerコントロール
• 4 内枠用Galleryコントロール
• 5 03│積み上げ棒グラフ
• 6 内枠用Galleryコントロール
• 7 04│集合棒グラフ、横グラフ
• 8 05│まとめ

01│グラフ描写領域と算出

大まかな構造は下図の通り外枠のContainerコントロールと内枠のGalleryコントロールです。

棒グラフ部分は、四角形の座標や高さを算出して表現しています。

それらを求めるために要素の値１で高さがどれだけ増えるのか係数を算出します。

サンプルを下図の通り計算すると0.003317になります。

続いて四角形の座標（Y）をX軸境界線のY（500）とし、要素の値×係数を引きます。

最後に四角形の高さを要素の値×係数にするだけです。

Yから要素の値×係数（四角形の高さ）を引く理由は下記の通りです。

02│棒グラフの作成

ここからは実際にコントロールなどを配置していきます。

下記設定をそのままコピペすれば同じような棒グラフが作成できます。

外枠用Containerコントロール

1. 外枠用としてContainerコントロールを800×600で作成します。この中に、グラフタイトルとＹ軸目盛、単位などをLabelコントロールで、Ｙ軸境界線を四角形で表示させます。
2. Ｙ軸目盛について、今回は３か所分を下記の通り設定します。表示数を増やしたい場合は、各々の中間になるよう算出してください。上段　Text=Round(Max(_GraphCollection01,Sum(Men,Lady))/1000,0)　Y=Gallery01.Y-Self.Height/2中段　Text=Round(Max(_GraphCollection01,Sum(Men,Lady))/1000,0)/2　Y=LabelMin.Y-LabelMax.Y)/2下段　Text=0　Y=Gallery01_1.Height-Self.Height/2
3. Ｙ軸境界線について、ギャラリー内のグラフ描写領域に合わせ、下記の通り設定します。今後、サイズを変更しないなら直接数値を入力しても構いません。　X=50　Y=Gallery01.Y　Width=1　Height=Gallery01.Height-50

内枠用Galleryコントロール

1. 内枠用としてGalleryコントロールを720×550で作成し、Itemsに_GraphCollection01を設定します。配置はグラフタイトルやＹ軸用目盛を考慮してX40、Y50としました。X軸目盛をLabelコントロールで、グラフ要素とＸ軸境界線を四角形で表示させます。
2. X軸目盛について、下記の通りギャラリーの最下段に設置します。Size=8Y=500
3. Ｘ軸境界線について、データ数増加に対応するため、ギャラリー内に埋め込みます。Y=500Width=40Height=1
4. グラフ要素について、一旦要素は１つで作成します。そのため、サンプルでは要素が２つ（menとLady）がありますが、合算させます。X=5Y=下線.Y-Self.HeightWidth=30Height=(ThisItem.Men+ThisItem.Lady)*(Gallery01_1.Height-LabelX_1.Height)/Max(_GraphCollection01,Sum(Men,Lady))

03│積み上げ棒グラフ

先ほどの解説で棒グラフは作成できたと思います。

今回のサンプルは要素が２つあるため、積み上げ棒グラフの作成方法を紹介します。

内枠のみの変更で対応できます。

内枠用Galleryコントロール

1. グラフ要素について、四角形を要素の数だけ追加します。まず棒グラフで作成した要素の四角形を複製します。（以後、複製元を要素１、複製後を要素２とします。）
2. 要素１について、高さを変更します。Height=ThisItem.Men*(Gallery01.Height-LabelX.Height)/Max(_GraphCollection01,Sum(Men,Lady))
3. 要素２については、座標と高さを変更します。Y=要素1.Y-Self.HeightHeight=ThisItem.Men*(Gallery01.Height-LabelX.Height)/Max(_GraphCollection01,Sum(Men,Lady))
4. 要素同士が同じ色だと判別できないため、変更します。

04│集合棒グラフ、横グラフ

要素２のＹを変更することで集合棒グラフに、Ｙと高さをそれぞれＸと幅に置き換えることで横グラフにすることもできます。これでレパートリーが増えますね。

05│まとめ

PowerAppsは発想を変えることで様々なことが表現できます。

データの並びを変えることでヒストグラムも作成できますね。

ただ、棒グラフ以外（折れ線グラフや散布図）は苦手なようで、きれいに作れません。

SVGを使ったグラフ描写も紹介していますので、併せてお読みください。