これからのグラフ表示をどう実装するか考える（公開用）

これからのグラフ表示をどう 実装するか考える

アジェンダ 1. 2. 3. 4. 5. 現状のAndroidでのグラフ表示はどうしてる？ Vicoって何？ MPAndroidChartとVicoを比較してみる Vicoのコードはどんな感じ？ まとめ

1. 現状のAndroidでのグラフ表示はどうしてる？ ● ● ● ● ● MPAndroidChart HelloCharts AnyChart YCharts 自前で頑張る 実際にはMPAndroidChartがほとんどを占める印象です。 XML時代からJetpack Compose時代に移行している現状でもMPAndroidChartのままAndroidViewを置い て実装しているプロジェクトが多いのではないでしょうか？

2. Vicoって何？ Vicoって何？ 〜 Jetpack Composeに最適化された、美しく滑らかなグ ラフを手軽に表示できるライブラリ ● ● ● ● https://github.com/patrykandpatrick/vico 開発元: Patryk & Patrick Android View (XML)でも使用可能(推奨はしない) KMPにも対応している 次のスライドに公式のサンプルアプリを触った動画を 添付したので見てみましょう

• https://github.com/patrykandpatrick/vico

Screen_recording_20250603_002306.mp4

• http://drive.google.com/file/d/1zh7hOEznlAMcZpC6vJVA8wvGi9CI8kN-/view

3. MPAndroidChartとVicoを比較してみる 項目 MPAndroidChart Vico UIフレーム ワーク AndroidViewベースのため運用の長いプ ロジェクトにも導入しやすい Jetpack Composeとの親和性が低い （要：AndroidViewでラップ） Jetpack Composeに適した設計 コード量 オブジェクト生成やメソッド呼び出し、 最初からJetpack Composeありきの設 豊富なカスタマイズ故に記載が冗長に 計になっているので直感的に記述でき なりがち る グラフの種 類 Line, Column, Bar, Pie, Scatter, Candlestick, Radarなど、非常に豊富 複合グラフにも対応 現状Line, Column, Bar, Candlestick(2025/1に追加)のみ 複合グラフにも対応

項目 MPAndroidChart Vico コミュニテ ィ・実績 長年の実績があり、情報量も豊富 まだまだ採用実績が豊富とは言えない ので情報量は少な目 カスタマイ ズ性 非常に強力 グラフ描画に必要なことはほぼ出来る イメージ 対応しているグラフごとに変更できる 項目（色、スタイル、ラベル等）はあ るものの未成熟 マルチプラ ットフォー ム 非対応 Android専用でありロジック共有はでき ない 対応 公式のサンプルアプリでも対応してい る 今後の展望 メンテナンスが停止している まだ発展途上であるがメンテナンス＆ 機能更新されている

4. Vicoのコードはどんな感じ？ @Composable private fun JetpackComposeBasicComboChart(…) { CartesianChartHost( rememberCartesianChart( rememberColumnCartesianLayer( // Column Chartに関連する設定 ), rememberLineCartesianLayer( // Line Chartに関連する設定 ), startAxis = VerticalAxis.rememberStart(), // Y軸 bottomAxis = HorizontalAxis.rememberBottom(), // X軸 ), modelProducer, // ここにデータを詰める modifier ) } CartesianChartHostの中にLayerを並べると複数のグラフ を重ねることができる それぞれのグラフに対して色やスタイル、データ間の間 隔等ある程度の見た目の設定はできる @Composable fun JetpackComposeBasicComboChart(modifier: Modifier = Modifier) { val modelProducer = remember { CartesianChartModelProducer() } LaunchedEffect(Unit) { modelProducer.runTransaction { // Column Chart用データ設定 columnSeries { series(4, 15, 5, 8, 10, 15, 9, 10, 7, 9, 10, 12, 14) } // Line Chart用データ設定 lineSeries { series(1, 5, 4, 7, 3, 14, 5, 9, 9, 14, 7, 13, 14) } } } JetpackComposeBasicComboChart(modelProducer, modifier) }

5. まとめ ● Good ○ ○ ○ Jetpack Compose, KMPに対応している 実装はかなり簡単 UXもリッチに見える ● Bad ○ ○ 使用頻度が高いと思われる円グラフに対応していない カスタマイズに難がある シンプルなグラフでは採用の可能性あり！ しかし、実際の業務では様々な要件に対応する必要があると考えられるため現状では今まで通り MPAndroidChartをComposableのAndroidViewに乗せて使うのが現実的か… 機能追加やメンテナンスは続いているので今後に期待