やろうとしている事
エクセルで棒グラフと折れ線グラフを重ねて表示する事はよくやりますし、簡単にできます。
しかし、PowerAppsのグラフはエクセルほど多くの機能がありませんし、
複数のグラフを表示するには文字通り複数のグラフコントロールを追加して
手作業で上手く重ねるしかありません。
例えば売上実績を棒グラフで、売上目標を折れ線グラフで表示する時に、
それぞれの値によってY軸の幅が自動で変わって上手く重なってくれません。
それを下の画像の様に動的にいつも正確に重なる様にする方法をご紹介します。
実際にボタンを一つ追加してその「OnSelect」属性に下記のコードをコピペして、
Altキーを押しながらそのボタンをクリックして、サンプルデータを作ってみます。
ClearCollect(テーブル,{年月:"2020-10",売上:15546548,目標:14611723},{年月:"2020-11",売上:16698343,目標:16659213},{年月:"2020-12",売上:16408874,目標:16307917},{年月:"2021-01",売上:15147416,目標:14854010})
すると下図の様な「テーブル」という名のコレクションが作くられます。
これを使って目的の複合グラフを作ってみます。
まず、売上実績の棒グラフを作成する。
１）「Items」属性から対象のデータを入れる。
メニューバーの「挿入」、「グラフ」から「縦棒グラフ」を追加します。
その「Items」属性に下記のコードをコピペします。
ShowColumns(
AddColumns(
SortByColumns(テーブル,"年月",Ascending),
"年月2",Right(年月,2),
"売上2",Round(売上 / 10000,0)
),
"年月2","売上2"
)
ネストされたPowerApps関数を理解するには内側の関数から外の関数へと見ていくのが基本です。
一番内側はSortByColumns関数で、
これはグラフ内でちゃんした年月の順番で表示されるようにするためです。
次はAddColumns関数です。
アプリ画面が小さいので、見易くする為に全てをシンプルにする必要があります。
上のサンプルデータを見て頂いた様に売上値が大きいので
「売上2」という列を作り10000で割って単位を「万円」に変更しています。
そしてRound関数で少数点以下を省略しています。
Ｘ軸の年月も見易くする為にRight関数で右から二文字だけにして月だけで表示し、
これを「年月2」という列名にしています。
グラフコントロールで必要なのはＹ軸とＸ軸になる二列だけですので、
ShowColumns関数で必要な列だけを抽出しています。
これでできたグラフがこれになります。
２）棒グラフの見かけを整える。
ご覧の様にグラフがカッコ悪いですねｗ。
カッコ良くしましょう。
グラフを一回クリックして縦棒グラフコントロールだけ選び、
画面右側のプロパティ内で設定を変えていきます。
まずブラフの棒の間隔が欲しいです。
「項目の間隔」属性に0から100の値を入れます。
「0」が間隔無しで「100」で棒と同じ幅の間隔が開きます。
今回は「60」にしておきました。
Ｙ軸が欲しいですので「グリッドスタイル」属性で、
「Ｘのみ」から「すべて」に変更します。
Ｘラベルが傾いているので「Ｘラベルの角度」属性の数値を「0」に変更しました。
「グラフとタイトル」をクリックして適当なタイトルを入れ、
全体のフォントの大きさをできるだけ大きくします。
（サイズは22前後をお勧めします。小さいとスマホで見た時に見難いです。）
先ほど単位を変えたのでラベルを一枚挿入して「万円」としてＹ軸近辺に配置します。
これでできたグラフが下図のようになり、見栄えが良いですね。
折れ線グラフを追加する。
次にメニューバーの「挿入」、「グラフ」から「折れ線グラフ」を追加します。
その「Items」属性に下記のコードをコピペします。
ShowColumns(
AddColumns(
SortByColumns(テーブル,"年月",Ascending),
"年月2",Right(年月,2),
"目標2",Round(目標 / 10000,0)
),
"年月2","目標2"
)
このコードは前述の棒グラフのコードの売上の列名を目標の列名に変えただけです。
参考までに最初の折れ線グラフは下図です。
この折れ線グラフのタイトル、両軸は棒グラフと重ねた時に邪魔になるので消します。
タイトルのラベルはただ削除し、
折れ線グラフの「グリッドスタイル」属性を「なし」に変えます。
また、両方の凡例は上手く並べて使えないので僕は両方削除して、
新たにラベルを追加して、その「Text」属性に「"棒グラフ：実績、折れ線：目標"」と入れます。
これでできたグラフがこれです。
棒グラフと折れ線グラフを正確に重ねる方法
上の図は一見完成したように見えますが、厳密にはY軸で正確に合っていません。
仮に今回正確に会わせられたとしても、将来は合わなくなります。
これを動的に合わせる方法がこれです。
１）両グラフの上端と下端の「位置」を揃える。
まず、棒グラフだけを選択して、その「位置」属性の数値を記録します。
これはそのコントロールの上端のアプリ画面内の位置なのです。
そして、折れ線グラフだけを選び、その「位置」属性に先ほどの数値を入れます。
これで上端がぴったり合うわけです。
次に、「グリッドスタイル」属性を一時的に「Ｙのみ」に変えます。
これは目分量になってしまいますが、
このコントロールの下端を棒グラフのＸ軸に合わせます。
そしてまた「グリッドスタイル」属性を「なし」に戻します。
Ｘ軸方向へは目分量で合わせても大きな問題は無いでしょう。
もちろん、元データのデータは同じ（月数が同じ）である事が前提です。
２）両グラフのＹ軸の最大値と最小値を揃える
最後にもう一つやる事があります。
これだけだと売上と目標が大きく違った時にＹ軸の目盛りの間隔が違ってきます。
それを合わす為に両方のグラフの下記の各属性に同じコードをコピペするのです。
Max(Max(テーブル,売上)/10000,Max(テーブル,目標)/10000)*1.1
この二つの属性は名前が違いますが同じ働きで、各グラフのＹ軸の最大値を設定します。
Max関数を３つ使ってますが、元データ内の売上と目標のそれぞれの最大値を求めて、
その内の大きい値×1.1の値を各グラフのＹ軸の最大値にしています。
同じ様に両方のグラフのＹ軸の最小値を同じ数値を入れれば
両方のグラフの最大値と最小値が全く同じになり、Ｙ軸の間隔も全く同じになります。
最小値を同じにする為の各属性とコードが下記になります。
Min(Min(テーブル,売上)/10000,Min(テーブル,目標)/10000)*0.8
エクセルだとこの作業を簡単にできますが、
PowerAppsだとこれだけの手間がかかってしまいます。
それでもこのやり方で棒グラフと折れ線グラフを正確に重ねて表示する事ができるのです。