iOS16／SwiftUI 4の新機能の使い方──Chartsフレームワーク、Navigation、Advanced controls

iOS16の新機能に触れてみよう 第1回

グラフの生成が容易に──Swift Chartsフレームワーク

　SwiftUIの仕様としてグラフを描画する機能がChartsフレームワークの名前で追加されました。

Swift Chartsの紹介（出典：What's new in SwiftUI）

　Swift自体の機能でグラフを描画できるため、Apple以外のライブラリなどに依存する必要はなくなります。Chartsフレームワークは既定で棒グラフ／面グラフ／折れ線グラフ／点グラフ／矩形グラフをサポートしています。

棒グラフを表示する

　Chartsフレームワークを利用して棒グラフを表示してみます。グラフに表示するサンプルデータとして月あたりの売り上げデータを作成し、X軸に月／Y軸に売り上げの棒グラフを作成します。

［リスト1］ChartsSample/ContentView.swift抜粋

import SwiftUI
import Charts // Charts framework をインポート

struct MonthAmount: Identifiable {       // グラフに表示するデータを定義
    var id = UUID()
    var month: String
    var amount: Double
}

extension MonthAmount {
    static let examples: [MonthAmount] = [  // サンプルデータ
        .init(month: "1月", amount: 100.00), .init(month: "2月", amount: 70.00),
        .init(month: "3月", amount: 90.00), .init(month: "4月", amount: 110.00),
        .init(month: "5月", amount: 130.00), .init(month: "6月", amount: 60.00)
    ]
}

struct ContentView: View {
    var body: some View {     // 画面にチャートを表示
        Chart {       // （1） 
            ForEach(MonthAmount.examples) { item in       // （2）
                BarMark(
                    x: .value("Month", item.month), y: .value("Amount", item.amount)
                ).foregroundStyle(.blue)
            }
        }.padding()
    }
}

棒グラフの表示

　グラフを表示するCharts構造体を呼び出します。その中で棒グラフを表示するBarMark構造体のx、yに対して配列のデータを割り当てます（2）。これだけで棒グラフを表示できます。

折れ線グラフを表示する

　前項のサンプルで表示した棒グラフを折れ線グラフで表示したい場合は、次のようにBarMark構造体を折れ線グラフを表示するLineMark構造体に変更します。

［リスト2］ChartsSample/ContentView.swift抜粋

struct ContentView: View {
    var body: some View {
        Chart {
            ForEach(MonthAmount.examples) { item in
                LineMark(    // LineMark構造体を利用
                    x: .value("Month", item.month), y: .value("Amount", item.amount)
                ).foregroundStyle(.blue)
            }
        }.padding()
    }
}

折れ線グラフの表示

　書式としては、Chartsブロックの中で、各グラフを表示する構造体にデータを割り当てるイメージです。

　上記のサンプルのように、短いコードで目的のグラフを表示することができます。