2022.04.16PowerApps│選択した棒グラフにラベルを表示させる方法ツイートこんにちは、あんこ先生です。PowerAppsのグラフにも、選択部分の値がわかるラベルを表示したくないですか?しかも、グラフの座標や値に合わせて追従する機能付きです。実装できれば素敵なグラフができあがりますね。そこで、今回は「もっと見栄えの良いグラフを作りたい」、「ラベルを追従させるやり方がわからない」といった方を対象に、グラフとそれに追従するラベルの作り方をわかりやすく紹介します。この記事を読めば、ワンランク上のグラフが作成できるようになります。PowerAppsで選択した棒グラフに追従するラベルを表示させる棒グラフの元データを作成する棒グラフを作るためには、x軸とy軸の二次元データが必要です。今回は、下記コードを使ってランダムな値で構成された10レコード分のコレクションを作成します。コレクションの中身は、後述するラベルの座標取りに使用する連番、x軸の日付、y軸の値の3項目で構成されます。));棒グラフをギャラリーで作成するグラフの描画はギャラリーで行います。データソースは先ほど作成いたコレクションを指定します。最適化しているので、加工する必要はありません。テンプレート部分は3つのコントロールで構成されています。x軸の日付を表示するラベルコントロールLabelDate、y軸を表示する四角図形RectangleGraph、下線を表現する四角図形RectangleBoderの3点です。それぞれ記述するコードは次の通りです。1))この時点で、簡単な棒グラフが作成できました。選択箇所がわかるように、色付けも忘れずに行ってください。棒グラフの作り方はこちらの記事で詳しく解説しています。関連記事PowerApps│融通の利く棒グラフを作成する方法2022.02.06追従するラベルを表示させる追従するラベルはギャラリーの外に作成します。ギャラリー内のコントロールはギャラリーサイズからはみ出せないからです。そのため、ラベルはギャラリーの外から操作する必要があります。ギャラリーの外からはThisItemで参照できないので、ちゃんと指定しないとエラーがでるよ。ラベルに利用するデータについてギャラリーはレコードを選択すると、その値をSelectedプロパティに返します。この中には、データソースだけでなくコントロールの値も含めてレコード形式で格納します。今回は、このレコードを参照させ、追従するラベルを操作します。ラベルに値を表示させるまずラベルを作成します。コンテナを用意して、その中にラベルコントロールLavelValue、円図形Circle1、三角図形Triangle1を配置します。それらは図を参考に組み立ててください。LavelValueにGalleryGraph.Selected.値を指定すれば選択したグラフの値が表示されます。表示位置や色、太さは好みで調整してください。ラベルの座標を指定するギャラリー内の各コントロールの値について、明示的に指定しなくても現在選択されているレコードのものが参照されます。そのため、関係するコントロールは直接名前を指定しても、座標に必要な情報が取得できます。RectangleGraphの頭にGalleryGraph.Selectedなどをつける必要はありません。上図では04.20のグラフから値を抽出します。この特性を利用して、コンテナの座標を求めます。コードの最後にある25は調整値です。好みで増減してください。ContainerLabelXプロパティ//x座標GalleryGraph.Selected.連番*GalleryGraph.TemplateWidth+GalleryGraph.X-Self.Width-25Yプロパティ//y座標GalleryGraph.Height-LabelDate.Height-RectangleGraph.Height+GalleryGraph.Y-Self.Height+25この段階で、レコードを選択すればラベルが追従してくるようになったはずです。ギャラリーそのものを動かしても付いてくるので面白いですよ。時間経過、または再選択時にラベルを非表示にする前項までで追従するラベルが作成できました。一度表示されると消えません。このままではさすがに邪魔なので消える仕組みを追加します。時間経過と再選択です。両方組み込んでおく方が使いやすいです。時間経過で、ラベルを非表示にします。ラベルの表示とタイマーの開始をひとつの変数で管理します。後述する再選択時に対応させるため、値は連番が格納されます。そのため、ブール型ではなく数値型として利用します。条件分岐では0はfalse、それより大きい値はtrueとして判定される特性があります。連番が格納された時点でtrueとして利用できます。動作の流れは次の通りです。グラフを押すと変数_pressが1になる。ContainerLabelのVisibletプロパティが1になり、表示される。TimerVisのStarttプロパティが1になりタイマーが作動する。タイマーが終わるとOnTimerEndが動作し、変数_pressが0になる。ContainerLabelのVisibletプロパティが0になり、非表示となる。カウント中にグラフを押すと経過時間がリセットされ、表示時間が延長します。タイマーの性質で、Startプロパティがtrueになった瞬間開始されるため、true→trueでは動作しません。そのため、一度falseを経由してtrueに戻しています。今度は、おなじレコードを連続して選んだ場合に、ラベルを非表示にします。レコードを選択すると押すと変数_pressの値とそのレコードの連番が一致するか判定する。異なる場合は、変数_pressにその連番が格納され、経過時間がリセットされる。一致する場合は、変数_pressが0になり、経過時間がリセットされラベルも非表示となる。具体的なコードは次の通りです。Reset(TimerVis);Set(_press,0);Set(_press,ThisItem.連番))ContainerLabel.Visibleプロパティ_pressTimerVis.Startプロパティ_pressTimerVis.OnTimerEndプロパティSet(_press,0);OnSelect範囲について図のように、ギャラリーのOnSelect範囲はどこに記述するかで大きく変わります。どこを選択したときに動作させるかで適切な箇所に記述しましょう。どこを選択しても動作させたい場合は、前面いっぱいに透明の図形を配置し、そこに記述することで実現できます。棒グラフに追従するラベルのまとめ今回はグラフとそれに追従するラベルの作り方を紹介しました。追従という仕組みを使えば、値が変更されても適切な位置に表示されることがわかりましたね。コントロールのXまたはYプロパティを数式にしたあと、手動で移動すると実数に上書きされるため注意してください。この機能を使ってラベルを追従させる必要はあまりありませんが、自己満足度はすこぶる高まります。細部にこだわって、アプリを作成していきましょう!さらにワンステップ!こちらの記事もどうぞ。関連記事PowerApps│スライサーを使ってExcelのタイムラインを再現する方法2022.04.18PowerApps│Plannerと連動したガントチャートの作成方法2022.04.30PowerApps│SVGとギャラリーで折れ線グラフを作る方法2022.04.20PowerApps│SVGを使った散布図とバブルチャートの作り方2022.04.20PowerApps│スライサーを使ってExcelのタイムラインを再現する方法2022.04.18ご支援よろしくおねがいしますこの記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。メッセージもいただけるとたいへん喜びます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。US七草あんこ非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。Twitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。