Chartsフレームワークの利用方法
SwiftUIの仕様としてグラフを描画する機能がChartsフレームワークの名前で追加されました。Chartsフレームワークを使ってグラフを描画する基本的な方法について説明します。
棒グラフを表示する
棒グラフは、BarMark構造体にx軸とy軸の値を指定することで表示できます。今回のサンプルでは、次のようにチャートを表示する部分をSampleChartの名前でメソッドとして分離して定義します。
import SwiftUI
import Charts // ----①
struct ContentView: View {
var body: some View {
NavigationStack{
VStack {
VStack(alignment: .leading, spacing: 8) {
SampleChart() // チャートを表示
}
.padding()
.background { // 角丸にして影をつけて表示
RoundedRectangle(cornerRadius: 10, style: .continuous)
.fill( Color.white.shadow(.drop(radius: 2)))
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top. // チャートを画面上寄りに表示
.padding().navigationTitle("Charts Sample")
}
@ViewBuilder
func SampleChart() -> some View {
Chart { // ----②
ForEach(sampleData){ item in
BarMark( // 棒グラフを表示
x: PlottableValue.value("date", item.date, unit: .day), // ----③
y: PlottableValue.value("amount", item.amount)
)
}
}.frame(height: 400)
}
}
チャートを表示するには、最初にChartsフレームワークをインポートし（①）、Chartブロックの中で棒グラフを表示するBarMark構造体を配置します（②）。Chartsフレームワークにはグラフを表示する構造体が次のように用意されています。
| 構造体 | グラフ |
|---|---|
| BarMark | 棒グラフ |
| AreaMark | 面グラフ |
| LineMark | 折れ線グラフ |
| PointMark | 散布図 |
| RectangleMark | 矩形でデータを表示 |
| RuleMark | 直線でデータを表示 |
各構造体をChartブロックの中に配置することでグラフを表示できます。各構造体を配置するときの引数は、グラフのx軸とy軸の値をPlottableValue構造体で指定します（③）。PlottableValue構造体のvalueメソッドでラベルと値を指定します。値がDate型の場合のみ、unitの引数で日付時間の単位を指定できます。プログラムコード内では、PlottableValueの記述は省略可能です。
サンプルではグラフを表示するViewをSampleChartの名前でメソッドとして定義しています。SampleChartメソッドには、Viewを生成する処理を行うので@ViewBuilderのアノテーションをつけています。
折れ線グラフを表示する
本連載第1回で紹介した通り、BarMark構造体の代わりにLineMark構造体を利用することで、棒グラフを折れ線グラフに変更することができます。今回は、Pickerでのグラフの切り替え、AreaMark構造体を利用して折れ線グラフの下に色をつける例を紹介します。
# 前略
struct ContentView: View {
@State var sampleData: [DailyAmount] = examples
@State var showLineGraph: Bool = false // -------- ① 折れ線グラフを表示するか？
var body: some View {
NavigationStack{
VStack {
VStack(alignment: .leading, spacing: 8) {
Toggle("Line Graph", isOn: $showLineGraph) // -------- ② 折れ線グラフ切り替えのトグル
.padding(.top)
SampleChart()
# 略
func SampleChart() -> some View {
# 略
Chart {
ForEach(sampleData){ item in
if showLineGraph {. // -------- ③ 折れ線グラフの表示
LineMark(
x: .value("date", item.date, unit: .day),
y: .value("amount", item.amount)
)
.foregroundStyle(Color.blue)
AreaMark(
x: .value("date", item.date ,unit: .day),
y: .value("amount", item.amount)
)
.foregroundStyle(Color.blue).opacity(0.1)
} else {
BarMark(
# 略
最初に折れ線グラフを表示するかどうかを意味するバインディング変数として、Bool型のshowLineGraphを定義します（①）。あとは、変数showLineGraphの値をトグルで切り替えられるようにします（②）。チャートを表示する際に、変数showLineGraphの値がtrueならば、LineMark構造体で折れ線、AreaMark構造体で（x, y）までの領域を塗りつぶします。
