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

こんにちは、頑なにBI利用を避けているあんこ先生です。

ギャラリーで表現したグラフを、Excelのタイムラインみたいに操作してみたくありませんか？

しかも、別記事で紹介したグラフの座標や値に合わせて追従するラベル機能付きです。

これなら、データ量が多いほど便利な機能になりますよね。

今回は「さらに見栄えの良いグラフを作りたい」、「データ量が多くても大まかな位置にジャンプしたい」といった要望にお応えします。

具体的には、スライサーの値を基にグラフのデータソースをフィルターする方法を紹介します。

この記事を読めば、さらに素敵なグラフが作成できるようになります。

なお、今回は下記記事で紹介した棒グラフを基に、機能を追加する形で解説しています。

スライサーを使ってExcelのタイムラインを再現する

※折れ線グラフは別記事で紹介しています。

棒グラフのサンプルデータを作成する

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

別記事ではランダムな値で構成された10レコード分のコレクションを作成しました。

今回は１年分必要なため、コードを少し変えて365レコード分のコレクションを作成します。

コレクションの中身は変わらず、連番、ｘ軸の日付、ｙ軸の値の３項目で構成されます。

Clear(_GraphData);
ForAll(Sequence(365,1),//ここが変わります
    Collect(_GraphData,
        {
            連番:Value,
            日付:Today()+Value,
            値:RoundUp(Rand()*30+20,0)
        }
    )
);

棒グラフと追従するラベルを作成する

冒頭でも述べましたが、棒グラフと追従するラベルの作成方法は別記事で紹介しています。

まだ作成していない人は、こちらの記事を確認してください。

スライサーでデータソースを操作する

スライサーの可動範囲を設定する

ギャラリーに表示させる棒グラフは、10日分とします。

表示日数を増やしたい場合は、1日ごとに50ずつ幅を広げてください。

なお、スライサーの可動範囲は最小値が0、最大値は365日-表示日数10の355にします。

せっかくなので、うるう年や半年など、母数が変わる可能性も考慮して、Maxプロパティには次のコードを記述します。

CountRows(_GraphData)-10

表示期間を表示させる

スライサーを動かしても期間がわからないので表示します。

適当なラベルコントロールを３つ配置し、開始年月日と▶、終了年月日を表示させます。

//開始年月日
Text(First(GalleryGraph_1.AllItems).日付,"yy.mm.dd")

//終了年月日
Text(Last(GalleryGraph_1.AllItems).日付,"yy.mm.dd")

参照するデータソースがギャラリーのAllItemsになっているところがポイントです。

後述するギャラリーのデータソースはスライサーの値を基にした10日間です。

そのため、この記述で最初と最後の日付を抜けば、開始年月日と終了年月日が表示できます。

ギャラリーのデータソースを指定する

ギャラリーのデータソースは、スライサーの値を基にした10日間にフィルターします。

まずCountRows関数で求めた全レコード数からスライサーで指定した値を引きます。

LastN関数にその値を使うと、スライサーで指定した数値以降にデータソースを絞れます。

そこからFirstN関数で先頭10レコードを抜けば目当ての範囲が抽出されます。

実際のコードは次の通りです。

FirstN(
    LastN(_GraphData,CountRows(_GraphData)-Slider1.Value)
    ,10
)

この状態でスライサーを動かせば、ヌルヌルっと機能すると思います。

ｘ軸のラベルを整える

一応１年分のデータを見させているのでｘ軸のラベルに年も追加しておきましょう。

次のコードで画像のようになります。

yyyyとmmの間に”.”をわざと入れていません。

これは、強制改行の仕組みを利用するためです。

Text(ThisItem.日付,"yyyymm.dd")

ラベルを追従させる

ラベルの追従について、スライサーで日付を進めると連番が11を超え、欄外に表示されてしまいます。

これを回避するため、xプロパティに下記コードを記述します。

yプロパティの修正は不要です。

(GalleryGraph_1.Selected.連番-First(GalleryGraph_1.AllItems).連番+1)*GalleryGraph_1.TemplateWidth+GalleryGraph_1.X-Self.Width-25

Excelのタイムライン再現のまとめ

今回はスライサーを使ってExcelのタイムラインを再現する方法を紹介しました。

データソースを絞らず、通常のスクロールバーから移動させる方法では、11日目からラベルが追従できなくなります。

紹介した方法なら、座標が一定に保たれるため、それを回避できます。

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

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

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

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

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

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

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

よろしくお願いします。

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