fl_cahrtで積上面グラフを実装する

Transcript

1. fl_chartで積上面グラフを実 装する 株式会社マネーフォワード 小野 紀輝
2. 小野 紀輝 Ono Toshiki • モバイルエンジニア ◦ Androidエンジニアを名乗り始 めて1年経ちますが新規画面書い たことありません • 石川県 • 趣味 ◦ スニーカー ◦ バドミントン ◦ フェス
3. 積上面グラフとは
4. 積上面グラフとは これ
5. MEのどこにあるのか • 資産タブ • この画面にはAddToAppの技術が用いら れている • AddToAppの詳しい話を聞きたい方は後ほ ど別のエンジニアの方を紹介します
6. LineChartのプロパティ • LineChartDataはLineChartの データやデザインを持つクラス • LineChartDataの中身を見ていく • 今回その他のプロパティに関する 解説は省略します
7. LineChartDataのプロパティ • 沢山引数あるけど今回説明するのは betweenBarsDataのみ • コメントによるとlineBarsDataの間を 塗ってくれるらしい
8. betweenBarsDataの役割 • betweenBarsDataなしだと右のように折線 グラフのみが描画される • betweenBarsDataにリストを渡す → 折線グ ラフの間を塗ってくれる • betweenBarsDataは塗り始めのindexと塗 り終わりのindexの情報を持っている
9. サンプルコード
10. • 今回の調査を通じて自身の理解が間違っていることに気がついた • もっと複雑な仕組みを想定していたが、実際はとてもシンプルなもの だった ◦ 線間を塗る処理 ◦ 座標間の計算 • lineBarsDataのリストのindex情報さえあれば積上面グラフは実装 可能だった お気持ち
11. fl_chart優秀すぎない？