PowerApps│選択した棒グラフにラベルを表示させる方法

こんにちは、あんこ先生です。

PowerAppsのグラフにも、選択部分の値がわかるラベルを表示したくないですか？

しかも、グラフの座標や値に合わせて追従する機能付きです。

実装できれば素敵なグラフができあがりますね。

そこで、今回は「もっと見栄えの良いグラフを作りたい」、「ラベルを追従させるやり方がわからない」といった方を対象に、グラフとそれに追従するラベルの作り方をわかりやすく紹介します。

この記事を読めば、ワンランク上のグラフが作成できるようになります。

PowerAppsで選択した棒グラフに追従するラベルを表示させる

棒グラフの元データを作成する

棒グラフを作るためには、ｘ軸とｙ軸の二次元データが必要です。

今回は、下記コードを使ってランダムな値で構成された10レコード分のコレクションを作成します。

コレクションの中身は、後述するラベルの座標取りに使用する連番、ｘ軸の日付、ｙ軸の値の３項目で構成されます。

Clear(_GraphData);
ForAll(Sequence(10,1),
    Collect(_GraphData,
        {
            連番:Value,
            日付:Today()+Value,
            値:RoundUp(Rand()*30+20,0)
        }
    )
);

棒グラフをギャラリーで作成する

グラフの描画はギャラリーで行います。

データソースは先ほど作成いたコレクションを指定します。

あらかじめ最適化しているので、加工する必要はありません。

テンプレート部分は３つのコントロールで構成されています。

ｘ軸の日付を表示するラベルコントロールLabelDate、ｙ軸を表示する四角図形RectangleGraph、下線を表現する四角図形RectangleBoderの３点です。

それぞれ記述するコードは次の通りです。

_GraphData

ThisItem.値*5

GalleryGraph.Height-LabelDate.Height-Self.Height

//選択中なら少し濃いめに変える
If(ThisItem.IsSelected,
    RGBA(246, 88, 16, 1),
    RGBA(253, 222, 207, 1)
)

この時点で、簡単な棒グラフが作成できました。

選択箇所がわかるように、色付けも忘れずに行ってください。

棒グラフの作り方はこちらの記事で詳しく解説しています。積上げもあります。

追従するラベルを表示させる

追従するラベルはギャラリーの外に作成します。

なぜなら、ギャラリー内のコントロールはギャラリーサイズからはみ出せないからです。

そのため、ラベルはギャラリーの外から操作する必要があります。

ギャラリーの外からはThisItemで参照できないので、ちゃんと指定しないとエラーがでるよ。

ラベルに利用するデータについて

ギャラリーはレコードを選択すると、その値をSelectedプロパティに返します。

この中には、データソースだけでなくコントロールの値も含めてレコード形式で格納します。

今回は、このレコードを参照させ、追従するラベルを操作します。

ラベルに値を表示させる

まずラベルを作成します。

コンテナを用意して、その中にラベルコントロールLavelValue、円図形Circle1、三角図形Triangle1を配置します。

それらは図を参考に組み立ててください。

LavelValueにGalleryGraph.Selected.値を指定すれば選択したグラフの値が表示されます。

表示位置や色、太さは好みで調整してください。

ラベルの座標を指定する

ギャラリー内の各コントロールの値について、明示的に指定しなくても現在選択されているレコードのものが参照されます。

そのため、関係するコントロールは直接名前を指定しても、座標に必要な情報が取得できます。

たとえば、RectangleGraphの頭にGalleryGraph.Selectedなどをつける必要はありません。

上図では04.20のグラフから値を抽出します。

この特性を利用して、コンテナの座標を求めます。

コードの最後にある25は調整値です。好みで増減してください。

//x座標
GalleryGraph.Selected.連番*GalleryGraph.TemplateWidth+GalleryGraph.X-Self.Width-25

//y座標
GalleryGraph.Height-LabelDate.Height-RectangleGraph.Height+GalleryGraph.Y-Self.Height+25

この段階で、レコードを選択すればラベルが追従してくるようになったはずです。

ギャラリーそのものを動かしても付いてくるので面白いですよ。

時間経過、または再選択時にラベルを非表示にする

前項までで追従するラベルが作成できました。

ただ、一度表示されると消えません。

このままではさすがに邪魔なので消える仕組みを追加します。

方法は２つあります。

時間経過と再選択です。

とりあえず両方組み込んでおく方が使いやすいです。

時間経過後にラベル非表示

時間経過で、ラベルを非表示にします。

ラベルの表示とタイマーの開始をひとつの変数で管理します。

後述する再選択時に対応させるため、値は連番が格納されます。

そのため、ブール型ではなく数値型として利用します。

なお、条件分岐では０はfalse、それより大きい値はtrueとして判定される特性があります。

つまり、連番が格納された時点でtrueとして利用できます。

動作の流れは次の通りです。コードは後述します。

1. グラフを押すと変数_pressが１になる。
2. ContainerLabelのVisibletプロパティが１になり、表示される。
3. また、TimerVisのStarttプロパティが１になりタイマーが作動する。
4. タイマーが終わるとOnTimerEndが動作し、変数_pressが０になる。
5. ContainerLabelのVisibletプロパティが０になり、非表示となる。

なお、カウント中にグラフを押すと経過時間がリセットされ、表示時間が延長します。

タイマーの性質で、Startプロパティがtrueになった瞬間開始されるため、true→trueでは動作しません。

そのため、一度falseを経由してtrueに戻しています。

再選択時にラベル非表示

今度は、おなじレコードを連続して選んだ場合に、ラベルを非表示にします。

1. レコードを選択すると押すと変数_pressの値とそのレコードの連番が一致するか判定する。
2. 異なる場合は、変数_pressにその連番が格納され、経過時間がリセットされる。
3. 一致する場合は、変数_pressが0になり、経過時間がリセットされラベルも非表示となる。

具体的なコードは次の通りです。

If(_press=ThisItem.連番,
    Reset(TimerVis);Set(_press,0);,
    Reset(TimerVis);Set(_press,0);Set(_press,ThisItem.連番)
)

_press

_press

Set(_press,0);

OnSelect範囲について

図のように、ギャラリーのOnSelect範囲はどこに記述するかで大きく変わります。

どこを選択したときに動作させるかで適切な箇所に記述しましょう。

どこを選択しても動作させたい場合は、前面いっぱいに透明の図形を配置し、そこに記述することで実現できます。

棒グラフに追従するラベルのまとめ

今回はグラフとそれに追従するラベルの作り方を紹介しました。

追従という仕組みを使えば、値が変更されても適切な位置に表示されることがわかりましたね。

なお、コントロールのXまたはYプロパティを数式にしたあと、手動で移動すると実数に上書きされるため注意してください。

この機能を使ってラベルを追従させる必要はあまりありませんが、自己満足度はすこぶる高まります。

細部にこだわって、アプリを作成していきましょう！

さらにワンステップ！こちらの記事もどうぞ。

関連記事PowerApps│スライサーを使ってExcelのタイムラインを再現する方法

2022.04.18

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

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

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

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

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

よろしくお願いします。

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