Power Apps で作る燃費計測アプリ③ - 知識ゼロからはじめるローコーディング開発

燃費計測アプリの作り方解説ですが、最後にグラフの作り方を説明します。今回はドロップダウンで選択した記録のグラフを画面に表示します。

下図のようにドロップダウンを挿入して、プロパティ[Items]にはDistinctで重複を除外したTitleをセットします。

プロパティ[OnChange]に値をセットすると、ドロップダウン選択時にアクションを起こすことが出来ます。ここではClearCollect関数でコレクションを作成します。
ドロップダウンで選択したタイトルを条件にテーブルから該当するデータをフィルタリングして、「燃費」と「和暦にした日付」の列を追加します。初回のデータは距離が0で燃費は計算出来ませんので、「Distance<>0」で除外しています。

f:id:island3m:20210927021730p:plain

続いて、1リッターあたりの走行距離が最も長かった時の距離数と短かった時の距離数を変数にセットします。Max関数とMin関数でもとめることが出来ます。1リッター当たりの平均走行距離も変数にセットします。

f:id:island3m:20210927021804p:plain

「挿入」から折れ線グラフを追加します。折れ線グラフには３つのコントロールが含まれますが、この中の[LineChart]のプロパティを下図を参考にセットします。[Fill]と[ItemColorSet]はグラフの色ですので、こちらはお好みの色をRGBAでセットします。

f:id:island3m:20210927021850p:plain

1リッター当たりの走行距離の最大と最小と平均、その時の計測日付をラベルで表示します。最後に戻るボタンの設定をして機能の設定は終了です。

f:id:island3m:20210927021936p:plain

画面デザインについてですが、背景画像は「ビュー」の「メディア」から画像をアップロードして、各スクリーンのプロパティ[BackgroundImage]でファイル名を指定して設定します。
各コントローラーの色についてですが、今回半透明を多用しています。背景画像を風景写真にしていると、各コントローラーの置き場所に悩んだり、色が合わせにくかったりするのですが、半透明にすることで、背景の色やデザインと馴染みやすくなるのではないかなと思います。

さて、実際にアプリを動かすとこのようになります。