カテゴリー(item)別の合計額を円グラフで表示するようにした。文字のサイズを変更できず見にくいグラフとなってしまった。このあたりがグラフの限界？extensionを使えばもう少しマシなグラフを描けるのか？
アプリ実行のビデオ：
Firebase Realtime DBからのデータの取得が時々うまくいかない。スムースにいく時もあるのに。
スクリーンのデザイン：
左から、メインのScreen1には円グラフのScreenに遷移するためのボタンを追加。
円グラフを表示するpieChartScreenは見ての通り。
棒グラフと同様、Chart1の中にChartData2D1を組み込んでいる。
ブロック・コード：
1. 円グラフの各扇形の背景色は、緑系のランダムな色に設定。RGBの値をリスト形式で保存する変数colorsを作成。なお、緑系にするため、G(Green)は200に固定。
棒グラフと同様に、ChartData2D1.AddEntry メソッドに、カテゴリー(item)とカテゴリーごとの小計金額を設定。
ChartData2D1のColorsは、colorsを適用。Chart1.Labelにはカテゴリー(item)名を設定。
2. 円グラフの扇形部分をタップしたら、カテゴリー(item)名と小計金額を表示。金額の3桁ごとのコンマは、TextUtilsというextensionを利用。
3. ここからは、各カテゴリー別の小計金額を算出するブロック・コード。
カテゴリー別小計額を格納する変数、カテゴリーリスト(category)およびカテゴリー別金額リスト(amountByCategory)を格納する変数。
カテゴリー(item)別小計金額をカテゴリー(item)名と共に格納するdictionary型変数。
カテゴリー(item)別に小計金額を算出する関数makeAmountByItem。
メインのScreen1よりは、一件ごとのカテゴリー(item)名と金額が別々にリストで渡される。カテゴリー(item)別に小計し、それぞれの変数に格納。この場合は、Lunchで、以降省略したが、順次小計していく。
********** 以下途中省略 ************
カテゴリー(item)別小計をそれぞれの変数に格納したら、関数makeAmountByCategoryを実行して、dictionary型変数amountListByCategoryに金額を挿入していく。そして、カテゴリー(item)リストとカテゴリー(item)別小計リストを変数（categoryおよびamountByCategory）に格納。これら二つの変数の内容を上記ChartData2D1.AddEntryメソッドに放り込み円グラフを描く。
＜私の備忘録として、上記カテゴリー別小計を算出するブロック・コードを図式化。一部訂正＞
Lunchの場合、アイテムのリストを順番にチェックしていき、Luchがあれば、金額リスト中の同じindexの金額(4,600)を抽出し、さらにチェックを続ける。またLunchがあれば、金額リストの同じindexの金額(6,800)を加算し、もうLunchがなくなれば、その金額をDictionary形式の変数amountListByCategoryのLunchとペアーのvalueに当てはめる。
この作業をLunch以外の他のアイテムについても行い、最終的にDcitionary形式の変数amountListByCategoryのvalueに値が設定される。
あとは、Dcitionary形式の変数amountListByCategoryのキー(get keys)とvalue(get values)のリストを取得し、円グラフに設定すればグラフの完成となる。
*************************************************************
4. Xの戻るボタンをタップしたら、メインのScreen1を表示する。
*************************************************************
前回までのブログ：
MIT App Inventorで遊ぶ (Expenses Memo 2-1 追加訂正部分のみ）
MIT App Inventorで遊ぶ (Expenses Memo 2）
MIT App Inventorで遊ぶ (Expenses Memo 1）
※コメント投稿者のブログIDはブログ作成者のみに通知されます