SwiftUI Chartsでグラフ表示を実装してみて分かったこと

Swift 6のStrict Concurrencyへの移行が一段落し、次はアプリ内に溜まったデータを数値の羅列ではなくグラフで見せたいと考え、SwiftUIのChartsフレームワークに挑戦しました。

1. データを渡すだけで自動的にグラフになると思っていた

最初、記録用の配列をそのままChartsに渡せば、いい感じの見た目のグラフが自動的にできあがるものだと思い込んでいました。

Chart(records) { record in
    LineMark(x: .value("日付", record.date), y: .value("値", record.value))
}

実際にはLineMarkやBarMarkといったマークの種類を自分で選び、x軸・y軸にどのプロパティを割り当てるかまで明示する必要がありました。データさえあれば見た目は自動で決まるという思い込みは誤りで、グラフの種類ごとに書き方を理解する必要があると気づきました。

記録日時をそのままx軸に渡したところ、データ数が増えるにつれて軸ラベルが密集して読めなくなってしまいました。

発生した問題:
日付ラベルが重なって文字化けのように見える

AxisMarksを使って表示するラベルの間隔を間引く設定を追加し、週単位・月単位など表示範囲に応じてラベルの粒度を切り替える処理を入れる必要がありました。データをそのまま渡すだけでは、実用に耐える見た目にならないと実感しました。

記録が追加されるたびにグラフをそのまま再描画する実装にしたところ、データ量が増えてから更新のたびに画面がカクつくようになりました。

原因は、記録全件を毎回配列ごと作り直してChartに渡していたことでした。表示範囲に含まれるデータだけを事前に絞り込んでから渡す処理に変更し、無駄な再計算を減らしたことで解決しました。表示するデータの範囲を絞る発想が抜けていたのが原因でした。

複数の系列を1つのグラフに重ねて表示する際、最初はデフォルトの色分けのまま放置していたのですが、どの色がどの系列かひと目で分かりにくいという指摘を自分でも感じました。

.foregroundStyle(by: .value("種類", record.category))

foregroundStyleに系列名を明示的に紐付け、凡例を必ず表示する設定に変更しました。グラフは見た目が整っているかどうかより、何を伝えたいグラフなのかが一目で分かるかどうかの方が重要だと気づかされました。

グラフ自体はきれいに描画されても、見る人に伝わらなければ意味がないと実感した実装でした。

次は、URLSessionとCodableでのJSON通信で分かったことをまとめます。

本記事は生成AI（Claude）を活用して執筆・編集しています。内容は実体験に基づき、執筆者本人が確認・監修しています。