LoginSignup
11
3

More than 3 years have passed since last update.

Power Appsで横棒グラフを作成する

Posted at

例によって12/17のPowerApps Advent Calendar 2019が空いていたので。

前置き

Power Appsには使えるグラフが3種類ありますが、横棒グラフはありません。
image.png

なのでコントロールを組み合わせて自前で作ってしまおうというお話です。

無いものは自分で作る、Do It Yourselfが出来るのがPower Appsの良いところ。

使うもの

データソース

数値の列を含むSharePointリストのTestList
image.png

コントロール

ギャラリーコントロール
image.png

スライダーコントロール
image.png

実装

準備

まずギャラリーのItemsTestListを設定します。
image.png

そして委任問題を避けるため、以下の関数をボタンなどに仕込んで実行します。

事前準備
ClearCollect(TestList取り込み,TestList)///コレクションにTestListを追加
UpdateContext({Max数量:Max(TestList取り込み,数量)})///コレクションのTestListから数量の最大値を調べる

次にギャラリーのテンプレート内にスライダーを追加します。
横棒グラフ作成準備.gif

スライダーの設定

ここからスライダーの見た目を棒グラフっぽくしていきます。
スライダーのプロパティからを以下のように設定します。

プロパティ名 設定値
値の表示 オフ
ハンドルのサイズ 1
表示モード ビュー

image.png

ここから更に棒グラフに寄せていきます。
image.png

次に弄るプロパティはこちら。

プロパティ名 設定値
レール 30
ハンドルの塗りつぶし 透明

image.png

これで大分グラフっぽくなりました。
image.png

ここから先はスライダーの左端と右端、どちらをグラフの起点とするかで作り方が変わります。

起点が左端の場合

スライダーのプロパティは以下の通り。

プロパティ名 設定値
既定 ThisItem.数量
最大 Max数量
最低 0

image.png

起点が左端のグラフが出来ました。

image.png

起点が右端の場合

プロパティ名 設定値
既定 ThisItem.数量*-1
最大 0
最低 Max数量

image.png

そしてレール値の塗りつぶしの色を入れ替えます。

image.png

起点が右端のグラフが出来ました。
image.png

細かい調整

ラベルでThisItem.数量を表示してあげるととてもグラフっぽくなります。
image.png

まとめ

  • 既定の機能を使って出来る表現は幅広い
    • 殆どの場合、データを使って何かを動かすという基本と簡単な数学の組み合わせです
  • 見た目に拘らなければ大抵何とかなる
    • 餅屋には勝てないので割り切りましょう
  • Power Appsの機能を知れば、出来ることも自ずと見えてくる
    • 自分が何を動かしているのか知らなければ、何が出来るかなんて分かりません

Power Appsでも少し作りこめば、Power BIには及びませんがインタラクティブなグラフも表現可能です。
インタラクティブなPowerAppsグラフ.gif

業務に何の機能が必要か?
それにはどういう表現がふさわしいのか?
色々とPower Appsを弄って考えてみてください。

11
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
3