11
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsAdvent Calendar 2019

Day 17

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?