今回は、PowerAppsのグラフ操作を見ていきます。
エクセルとかとは違いどのプロパティに情報を入れるのかなどグラフオブジェクトの構造を理解する必要がありますので、どのプロパティにどのような情報を当て込むのかなどを中心に解説していきます。
PowerAppsに必須の知識PowerFX対応の学習本はこちら
PowerApps学習の本命・実際のアプリももらえる学習本
PowerApps学習方法一覧
グラフの追加
グラフの追加は挿入タブからグラフを選択することでグラフのオブジェクトを画面に追加することができます。
グラフには
- 縦棒グラフ
- 折れ線グラフ
- 円グラフ
が用意されています。
※BIタイルは今回では扱いません。
追加した際にはデフォルト表示で次のようなものが出ます。
これらはあくまでもサンプルとして表示されているだけですので、この後必要な設定を行い目的に沿ったデータのグラフを作成します。
グラフオブジェクトの構成
グラフオブジェクトは
- Legend ・・・グラフの項目
- ＊＊Chart ・・・グラフの描画部分（＊＊はかくグラフの英語の名前がはいる）
- Title ・・・タイトル部分
の三つで構成されます。
データの設定
各グラフにデータを割り当てる場合はグラフオブジェクトではなく、その下のオブジェクトである＊＊Chartの項目から指定します。
レイアウト
グラフのレイアウトを変える場合は＊＊Chartから指定します。
項目名（縦軸グラフ折れ線グラフのみ）
＊＊Chartで右側のプロパティを選びグリッドを選択すると表示項目を指定できます。
- すべて・・・横軸縦軸の両方が表示
- なし・・・項目名なし
- Xのみ・・・横軸のみ表示
- Yのみ・・・縦軸のみ表示
となります。
項目の詳細（縦軸グラフは数字、折れ線グラフは点の位置）
項目の詳細を表示させる場合はプロパティのマーカーで指定できます。
縦軸グラフの場合はマーカーをオンにすることで各縦軸に詳細の数字が表示されます。
折れ線グラフの場合はマーカーをオンにすることでグラフの点が表示されます。
グラフ間の間（隔縦軸グラフと円グラフ）
縦軸グラフの項目の間隔はプロパティの項目の間隔で指定できます。
0で隙間なし、数値を大きくすることで間隔は広くなります。
円グラフの場合は展開で広げることができます。同じく０で隙間なしとなりますが、0でも隙間が発生する場合は各項目間の枠線（スライス）の枠線が表示されており、その枠線が白色のため隙間が見えているだけですので、その枠線を０にすることで隙間がなくなります。
項目の色設定
通常のプロパティの色設定では項目の色やグラフの描画部分の枠線の色が変わります。
グラフ部分の色設定
グラフ内のレイアウトの色を変える場合は、詳細設定の色設定を変える必要があります
RGBA(*,*,*,*)とはPowerAppsにおけるデータの型の一つでパソコン上の色を指定する方法です。指定方法は
RGBA(赤,緑,青,透過度)
で指定できます。赤、緑、青の部分のすうちはは0～255で指定し、透過度の部分は0～1が範囲となり小数点で指定します。
グラフを全部同じ色で指定する場合は
[RGBA(*,*,*,*),RGBA(*,*,*,*)]と同じ色指定を[X,X]の形で2回指定する必要があります。
ちなみに色を一つだけ指定するとPowerAppsが自動で色の濃淡を調整した状態になります。
違う色を複数回指定するとそれぞれの棒グラフに色を指定できますが、指定した色数より項目の数が多い場合は指定した色の展開を繰り返します。
値を空にすると、PowerAppsで自動的に色を割り振ってくれます。
今回は支店売上というコレクションを作成してみましたのでそれを棒グラフに割り当てています。
最小値と最大値
場合によっては最大値と最小値を指定する必要があると思いますがその場合は系列軸の最大値・最小値を指定することで制御できます。
この時、やっぱり自動調整に戻そうとすると数値を消すと勝手に０が入ってしまい画面表示がおかしくなってしまいます。
系列軸の最小値・最大値の初期値は数値なし（＝空）であり、0ではありません。そのため０が入ってしまうと最小値・最大値がともに０の状態になってしまいます。
再度、数値なしの状態にするにはプロパティの詳細設定から
SeriesAxsisMin・SeriesAxsisMax を空にすることで再度自動調整の状態になります。
表示項目を増やす
コレクションの中に複数のデータがあり、グラフの表示を増やしたい場合はどうすればよいでしょうか。
例えば次のコレクションがあり、これを棒グラフで表示させます。
元のデータは第一四半期売上と第二四半期売り上げの二つがありますが、現状では一つしか表示されていません。この場合は系列の数を２にしましょう。
また、どのグラフをどの位置に表示させるかは詳細設定のSeriesで設定できます。
