【Bubble】家計簿アプリ②

こんにちは。UGOK-5thメンバーのミサです。

今回の記事は「家計簿アプリ①」の続きです。

前回は

1, RepeatingGroupを日付順に表示する

2,グラフの表示

3,計算機能を作る

4,表示したい月だけの情報が見られるようにする

を課題にしました。

現在は、

1, RepeatingGroupを日付順に表示する

2,グラフの表示

まで進めることができました。

それぞれの方法について今から説明します。

1, RepeatingGroupを日付順に表示する

まずはデータを入力するInput画面の情報をDataと連携させます。

ここではIncomeのInputで入力する情報をContentとしています。Contentのfieldではそれぞれの情報（会社名、口座、日程、金額）を記載しています。

RepeatingGroupのポップアップウィンドウのType of contentを先ほど設定したContentにし、Data source→Do a search for、Type→Contentにして情報を連携させます。

そして、Sort by→日程とします。

これで入力した日付順に情報が並びます。

2,グラフの表示

まずはプラグインでChart Elementをインストールします。

DesignタブからLine/BarChartを選択し配置します。

円グラフを設置したいのでChart typeをPieにしValue expressionとLabel expressionでそれぞれの値を設定します。

これで何にどのくらい出費をし、収入を得ているか一目で見てわかるようになります。

 まとめ

前回の課題の半分しか解決していないので次回までに全て完成させようと考えています。

これで今回の記事を終わります。最後まで読んでくださいありがとうございました。