PowerAppsで融通の利く棒グラフを数種類作成してみた

アイキャッチ




七草あんこ

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

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

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

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

いきなり結論

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

02│棒グラフの作成

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

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

外枠用Containerコントロール

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

内枠用Galleryコントロール

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

03│積み上げ棒グラフ

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

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

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

内枠用Galleryコントロール

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

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

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

05│まとめ

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

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

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

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

アイキャッチ
アイキャッチ
アイキャッチ

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。