SwiftUIのCanvasでリッチなグラフを実装する by kaneko

iOSDC Japan 2024
レギュラートーク(20分)

SwiftUIのCanvasでリッチなグラフを実装する

kaneko
1

私が実装を担当する『家計簿プリカ B/43』で支出をグラフで可視化する機能をリリースしました。
このグラフは、横軸に日にち、縦軸に累積支出額を取り、月ごとに折れ線グラフで支出の経過を可視化できるようになっています。
グラフをタップするとHaptic Feedbackを発しながらその日の支出額, 決済店舗を表示し、グラフ上をドラッグすることでパーティクルアニメーションを描画しながら別日の支出の詳細を確認できます。
このようなリッチなグラフを実装する上で、我々はApple純正のSwift Chartsフレームワークやその他OSSのライブラリではなく、SwiftUIのCanvas Viewを用いたカスタム実装を採用しました。
このセッションでは、グラフの実装においてChartsや他OSSとの比較をしながら、SwiftUIでCanvasを利用したリッチなグラフの実装について基本的なグラフの描画からジェスチャーでの操作を含む実際のプロダクトでの実装事例を紹介します。