【Swift UI】Swift Chartsフレームワークの使い方!棒グラフの実装方法

この記事からわかること
- Swift UIで使えるSwift Chartsフレームワークの使い方
- 棒グラフの実装方法
- 表示できるグラフの種類
- 棒グラフのカスタマイズ
index
[open]
\ アプリをリリースしました /
環境
- Xcode:16.0
- iOS:18.0
- Swift:5.9
- macOS:Sonoma 14.6.1
Swift UIでグラフを実装するためのフレームワークがiOS16から公式より提供されるようになったので実装方法や使い方についてまとめていきたいと思います。
Swift Chartsフレームワークとは?
「Swift Charts」はSwift UIで使用できるフレームワークでグラフを簡単に作成、カスタマイズすることが可能です。Apple公式から提供されているので導入作業などは必要なく、import Charts
と記述することで使用できるようになります。
UIKitであれば外部のライブラリですが「DGCharts」がよく利用されていると思うのでこちらの記事を参考にしてください。
棒グラフの実装方法
実際にを使用してグラフを実装する手順を見ていきます。まずは簡単な「棒グラフ」を実装してみます。
実装の手順と流れ
- データモデルの作成
- データソースの作成
- グラフの実装
1.データモデルの作成
グラフで表示させるデータモデルを作成します。Identifiable
に準拠させておけば扱いやすいのでid
プロパティを追加しておくことをおすすめします。このモデルがグラフに表示するデータ1つの情報を保持することになります。そのため以下の項目を持たせておくとグラフ化しやすくなります。
- 名称:データの名称
- 値 :グラフに表示させるデータ値
- 色 :データの色
2.データソースの作成
続いて実際にグラフに反映させるためのデータソースを定義します。データソースは配列や辞書型として保持しておくと操作がしやすくなります。
3.グラフの実装
データの準備ができたので実際にグラフを実装していきます。Swift Chartsではグラフビューを実装するためのChart
構造体が定義されており、その中に表示させたいデータを〇〇Mark
と名のつく構造体で配置していきます。棒グラフであればBarMark
を使用します。
BarMark
の引数x
にはX軸上に表示させたいデータ(今回は名前)を引数y
にはY軸上に表示させたいデータ(今回はスコア)を渡します。
これで以下のような棒グラフが表示されるようになります。

またForEach
を使用しなくてもデータモデルがIdentifiable
に準拠していればChart
の引数にデータソースを渡すだけでも実装することができます。また棒グラフの場合XとYを入れ替えるだけで横向きの棒グラフにすることも可能です。

実装できるグラフ(Mark)の種類
Swift Chartsでは表示させるデータの構造体(〇〇Mark
)を入れかえるだけで簡単に様々なグラフを実装することができます。
- BarMark:棒グラフ
- AreaMark:エリアグラフ
- LineMark:折線グラフ
- PointMark:ポイントグラフ
- RectangleMark:四角形グラフ
- RuleMark:罫線グラフ(※)
※:この中ではRuleMarkのみ少し実装方法を変えないと表示できません。
AreaMark:エリアグラフ

LineMark:折れ線グラフ

PointMark:ポイントグラフ

RectangleMark:四角形グラフ

RuleMark:罫線グラフ

ガントチャート

棒グラフのカスタマイズ
棒グラフの実装方法は上記の説明の通りですが、カスタマイズしたグラフを実装することも可能です。

積み上げグラフ
先ほどのデータを以下のように変更して生徒ごとに教科の点数と合計値が分かるような積み上げグラフを実装するにはまとめたいデータの値を同じにするだけで自動的に積み上げグラフを実装してくれます。

またchartForegroundStyleScale
を使用することでデータの凡例を追加することができます。引数には表示させたい凡例名と色を辞書形式で渡します。
1つのカテゴリ(Mark)に複数の棒グラフを設置する
積み上げではなく1つのカテゴリに複数の棒グラフを設置したい場合はposition
を使用します。引数には1つのMarkに別で表示させたいデータを指定するだけです。

Markのカスタマイズ
Mark単位でもグラフの太さやカラー、アノテーションの付与などカスタマイズが可能です。annotation
では引数に表示する位置と表示したいビューを指定します。

ラベルを非表示にする
これは棒グラフに限ったカスタマイズではないですが、表示しているラベルを非表示にすることも可能です。

ラベルをもっと柔軟にカスタマイズしたい場合は以下の記事を参考にしてください。
グラフ機能のカスタマイズ
データ数が多いグラフの場合はchartScrollableAxes
を使用することでグラフエリアのスクロールさせることができるようになります。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。