グラフの生成が容易に──Swift Chartsフレームワーク
SwiftUIの仕様としてグラフを描画する機能がChartsフレームワークの名前で追加されました。
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ブロックの中で、各グラフを表示する構造体にデータを割り当てるイメージです。
上記のサンプルのように、短いコードで目的のグラフを表示することができます。
