2023/2/7

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

この記事からわかること

Swift UIで使えるSwift Chartsフレームワークの使い方
棒グラフの実装方法
表示できるグラフの種類
棒グラフのカスタマイズ

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.1
Swift：5.9
macOS：Sonoma 14.1

Swift UIでグラフを実装するためのフレームワークがiOS16から公式より提供されるようになったので実装方法や使い方についてまとめていきたいと思います。

Swift Chartsフレームワークとは？

公式リファレンス：Swift Charts

「Swift Charts」はSwift UIで使用できるフレームワークでグラフを簡単に作成、カスタマイズすることが可能です。Apple公式から提供されているので導入作業などは必要なく、import Chartsと記述することで使用できるようになります。

UIKitであれば外部のライブラリですが「DGCharts」がよく利用されていると思うのでこちらの記事を参考にしてください。

棒グラフの実装方法

実際にを使用してグラフを実装する手順を見ていきます。まずは簡単な「棒グラフ」を実装してみます。

実装の手順と流れ

データモデルの作成
データソースの作成
グラフの実装

1.データモデルの作成

グラフで表示させるデータモデルを作成します。Identifiableに準拠させておけば扱いやすいのでidプロパティを追加しておくことをおすすめします。このモデルがグラフに表示するデータ1つの情報を保持することになります。そのため以下の項目を持たせておくとグラフ化しやすくなります。

名称：データの名称
値　：グラフに表示させるデータ値
色　：データの色

struct Subject: Identifiable {
    var id = UUID()
    var name: String
    var score: Int
    var color: Color
}

2.データソースの作成

続いて実際にグラフに反映させるためのデータソースを定義します。データソースは配列や辞書型として保持しておくと操作がしやすくなります。

var list: [Subject] = [
    .init(name: "国語", score: 60, color: .green),
    .init(name: "数学", score: 70, color: .yellow),
    .init(name: "英語", score: 80, color: .orange)
]

3.グラフの実装

データの準備ができたので実際にグラフを実装していきます。Swift Chartsではグラフビューを実装するためのChart構造体が定義されており、その中に表示させたいデータを〇〇Markと名のつく構造体で配置していきます。棒グラフであればBarMarkを使用します。

BarMarkの引数xにはX軸上に表示させたいデータ(今回は名前)を引数yにはY軸上に表示させたいデータ(今回はスコア)を渡します。

Chart {
    ForEach(list) { subject in
        BarMark(
            x: .value("教科名", subject.name),
            y: .value("点数", subject.score)
        ).foregroundStyle(subject.color)
    }
}

これで以下のような棒グラフが表示されるようになります。

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

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

Chart(list) { subject in
    BarMark(
        x: .value("点数", subject.score),
        y: .value("教科名", subject.name)
    ).foregroundStyle(subject.color)
}

実装できるグラフ(Mark)の種類

Swift Chartsでは表示させるデータの構造体(〇〇Mark)を入れかえるだけで簡単に様々なグラフを実装することができます。

BarMark：棒グラフ
AreaMark：エリアグラフ
LineMark：折線グラフ
PointMark：ポイントグラフ
RectangleMark：四角形グラフ
RuleMark：罫線グラフ(※)

※：この中ではRuleMarkのみ少し実装方法を変えないと表示できません。

AreaMark：エリアグラフ

LineMark：折れ線グラフ

PointMark：ポイントグラフ

RectangleMark：四角形グラフ

RuleMark：罫線グラフ

棒グラフのカスタマイズ

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

積み上げグラフ

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

struct Subject: Identifiable {
    var id = UUID()
    var name: String
    var score: Int
    var color: Color
    var student: String
}

struct ContentView: View {
    
    var list: [Subject] = [
        .init(name: "国語", score: 60, color: .green, student: "Mahiro"),
        .init(name: "数学", score: 70, color: .yellow, student: "Mahiro"),
        .init(name: "英語", score: 80, color: .orange, student: "Mahiro"),
        .init(name: "国語", score: 80, color: .green, student: "Ame"),
        .init(name: "数学", score: 65, color: .yellow, student: "Ame"),
        .init(name: "英語", score: 85, color: .orange, student: "Ame"),
        .init(name: "国語", score: 100, color: .green, student: "Yori"),
        .init(name: "数学", score: 90, color: .yellow, student: "Yori"),
        .init(name: "英語", score: 95, color: .orange, student: "Yori"),
    ]
    
    var body: some View {
        Chart(list) { subject in
            BarMark(
                x: .value("生徒名", subject.student),
                y: .value("点数", subject.score)
            ).foregroundStyle(subject.color)
        }.chartForegroundStyleScale([
            "国語": .green, "数学": .yellow, "英語": .orange
        ]).padding()
    }
}

またchartForegroundStyleScaleを使用することでデータの凡例を追加することができます。引数には表示させたい凡例名と色を辞書形式で渡します。

1つのカテゴリ(Mark)に複数の棒グラフを設置する

積み上げではなく1つのカテゴリに複数の棒グラフを設置したい場合はpositionを使用します。引数には1つのMarkに別で表示させたいデータを指定するだけです。

Chart(list) { subject in
    BarMark(
        x: .value("生徒名", subject.student),
        y: .value("点数", subject.score)
    ).foregroundStyle(subject.color)
        .position(by: .value("教科名", subject.name))
}.chartForegroundStyleScale([
    "国語": .green, "数学": .yellow, "英語": .orange
]).padding()

Markのカスタマイズ

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

Chart(list) { subject in
    BarMark(
        x: .value("教科名", subject.name),
        y: .value("点数", subject.score),
        width: 10 // グラフの太さ
    ).foregroundStyle(subject.color) // グラフカラー設定
    .annotation(position: .top) {    // アノテーション(注釈)付与
        Image(systemName: "swift")
    }
}.padding()

ラベルを非表示にする

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

Chart(list) { subject in
    BarMark(
        x: .value("教科名", subject.name),
        y: .value("点数", subject.score)
    ).foregroundStyle(subject.color)
}.padding()
    .chartLegend(.hidden) // 項目名非表示
    .chartXAxis(.hidden)  // X軸ラベル非表示
    .chartYAxis(.hidden)  // Y軸ラベル非表示

ラベルをもっと柔軟にカスタマイズしたい場合は以下の記事を参考にしてください。

グラフ機能のカスタマイズ

データ数が多いグラフの場合はchartScrollableAxesを使用することでグラフエリアのスクロールさせることができるようになります。

Chart(list) { subject in
    BarMark(
        x: .value("教科名", subject.name),
        y: .value("点数", subject.score)
    ).foregroundStyle(subject.color)
}.padding()
    .chartScrollableAxes(.horizontal) // 横スクロール可能
    .chartScrollableAxes(.vertical)   // 縦スクロール可能

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift