これは何?
Chartsのドキュメントを上から下まで読んである程度自分なりにまとめたものになります。なのでこの記事を読んでChartsを知ろうというよりは、実装するときの参考資料程度に見た方がいいかと思います。
もちろんドキュメントの内容全てを網羅してる訳でもないので、随時更新しようと思います。
注意事項
本記事に記載しているAPIなどについては、X軸用/Y軸用とそれぞれあります。
全て書くと冗長になるので、X軸のAPIについて記載がある場合は、Y軸のAPIもあるんだなと思いながら見てください。
基礎
日本語ではグラフのことを「グラフ」というが、Charts内ではグラフのことをチャートという。
棒グラフは”bar chart”、折れ線グラフは”line chart”といった感じ。
また、以下のような用語がある
- Mark
- データポイントを示す1つ1つの視覚的な形状のこと。下の図の青い棒1つをMarkという
- Plot area
- chartの描画領域
- Grid line
- chartの背景に表示される線
- Axis
- グラフの縦軸横軸を示す
- Axis value label (tick label)
- 軸に沿って配置される数値やカテゴリーのLabel
- Tick
- Grid lineの延長上に表示されるもので、Axis value labelの正確な位置を示すもの
基本的な定義方法
Chart内に描画したいMarkを定義するだけ。
import SwiftUI
import Charts
struct ContentView: View {
var body: some View {
Chart {
BarMark(
x: .value("Category", "A"),
y: .value("value", 100)
)
BarMark(
x: .value("Category", "B"),
y: .value("value", 200)
)
}
.frame(height: 200)
.padding()
}
}
![スクリーンショット 2024-05-20 22.48.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F658674d5-0cd1-c9ab-355a-5ddb0fb4fde6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=17df51e771a3152ab30d8e0f433143f4)
BarMarkの引数x, yにそれぞれ表示するカテゴリとその値を指定する。
各軸の情報は指定しなくてもデータに基づいて最適な情報を描画してくれる。
ForEachの使用
実際には1つ1つBarMark()を指定しないので、以下のようにまとめて定義する
struct Data: Identifiable {
var id: String { category }
let category: String
let value: Int
}
struct ContentView: View {
let data: [Data] = [
.init(category: "A", value: 100),
.init(category: "B", value: 200)
]
var body: some View {
Chart {
ForEach(data) {
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
}
}
}
}
Chart内で扱うのがForEachのデータのみの場合、以下のように指定も可能。
Chart(data) {
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
}
// dataがidentifiableに準拠してない場合Chart(data, id: \.category)のように指定も可能
グラフの向きを変える
xとyの値を入れ替えると描画も横向きに変わる
BarMark(
x: .value("value", $0.value),
y: .value("Category", $0.category)
)
Markの種類
以下のMarkを通して各chartを実装できる。これに加えてiOS17からはSectorMark(いわゆる円グラフ)が実装可能になった。
複雑なchartもこのMarkを組み合わせて実装する。
BarMark
基本は前述した通りのBarMark(x:y:)。これ以外にもイニシャライザとその引数によって様々なBarMarkが表現できる
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
BarMarkのイニシャライザ1
BarMark(x:y:)のイニシャライザをよく見ると、デフォルト引数として以下のような指定も可能となっている。
(MarkDimension、MarkStackingMethodについては後述)
init<X, Y>(
x: PlottableValue<X>, // x軸の値
y: PlottableValue<Y>, // y軸の値
width: MarkDimension = .automatic, // Markの横幅
height: MarkDimension = .automatic, // Markの縦幅
stacking: MarkStackingMethod = .standard // stackの方法
) where X : Plottable, Y : Plottable
例えば以下のような表現も可能となる
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value),
width: .fixed(30), // 横幅を30に固定
stacking: .center // 各Markの中心点が中央に来るように
)
BarMarkのイニシャライザ2
range bar chart(範囲型棒グラフ)を生成するのに使用する
init<X, Y>(
x: PlottableValue<X>,// x軸の値
yStart: PlottableValue<Y>, // そのMarkのminの値
yEnd: PlottableValue<Y>, // そのMarkのmaxの値
width: MarkDimension = .automatic // Markの横幅
) where X : Plottable, Y : Plottable
Chart(data, id: \.date) {
BarMark(
x: .value("Month", $0.date, unit: .month),
yStart: .value("Daily Min", $0.dailyMin),
yEnd: .value("Daily Max", $0.dailyMax),
width: .init(floatLiteral: 20)
)
}
BarMarkのイニシャライザ3
x軸かy軸を固定したchartを生成する。
iPhoneの設定アプリで見れるstorageの表現などに使用。
init<X>(
x: PlottableValue<X>,
yStart: CGFloat? = nil, // その値の開始位置。nilの場合は左に揃える
yEnd: CGFloat? = nil, // その値の終了位置
width: MarkDimension = .automatic,// Markの横幅
stacking: MarkStackingMethod = .standard // stackの方法
) where X : Plottable
let data: [FileCategory] = [
.init(fileSizePercent: 50, fileCategory: "Applications"),
.init(fileSizePercent: 10, fileCategory: "Photos"),
.init(fileSizePercent: 5, fileCategory: "Music"),
.init(fileSizePercent: 3, fileCategory: "Podcasts"),
.init(fileSizePercent: 10, fileCategory: "iOS"),
.init(fileSizePercent: 10, fileCategory: "System Data"),
]
public var body: some View {
VStack {
Chart(data, id: \.fileCategory) {
BarMark(
x: .value("File Size Percent", $0.fileSizePercent)
)
.foregroundStyle(by: .value("File Category",$0.fileCategory))
}
.chartXAxis(.hidden) // x軸を非表示
.frame(height: 50)
}
}
.foregroundStyle(by:)を用いることでグループごとに色を変えることができる。
自動的にlegend(凡例)も付与される。
![simulator_screenshot_8F60CEEB-508D-4146-9ECE-42D9BCB6F459.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F961e5978-9a73-3222-1ef7-f1140697c28d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f8802ab0a7d24992cf985ae6e03be238)
BarMarkのイニシャライザ4
Y軸固定で、Xの指定した開始位置/終了位置で描画する(X軸固定のイニシャライザもあり)
init<X>(
xStart: PlottableValue<X>,
xEnd: PlottableValue<X>,
yStart: CGFloat? = nil,
yEnd: CGFloat? = nil
) where X : Plottable
let tasksData: [WorkHours] = [
WorkHours(task: "Task A", startHour: 9, endHour: 13),
WorkHours(task: "Task B", startHour: 14, endHour: 16),
WorkHours(task: "Task C", startHour: 17, endHour: 19),
]
public var body: some View {
Chart(tasksData, id: \.task) {
BarMark(
xStart: .value("Start Time", $0.startHour),
xEnd: .value("End Time", $0.endHour)
)
}
.frame(height: 50)
}
![スクリーンショット 2024-05-20 23.25.04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F954ca483-b695-15d2-18b5-daf6ef5f64cf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4fa77981ce80260ad68319b23ad525b7)
積み上げ棒グラフ
.foregroundStyle(by:)を使うことでシンプルなStacked Bar Chartを作れる。
struct DataSummary: Identifiable {
var id: String { name }
var name: String
var dataList: [Data]
}
struct Data: Identifiable {
var id: String { category }
let category: String
let value: Int
}
struct ContentView: View {
let hogeDataList: [Data] = [
.init(category: "A", value: 100),
.init(category: "B", value: 200)
]
let piyoDataList: [Data] = [
.init(category: "A", value: 50),
.init(category: "B", value: 80)
]
var dataSummaryList: [DataSummary] {[
.init(name: "hoge", dataList: hogeDataList),
.init(name: "piyo", dataList: piyoDataList)
]}
var body: some View {
Chart(dataSummaryList) { dataSummary in
ForEach(dataSummary.dataList) { data in
BarMark(
x: .value("Category", data.category),
y: .value("value", data.value)
)
// nameごとに色を変える(ここでは色の指定ができない)
.foregroundStyle(by: .value("name", dataSummary.name))
}
}
// 色の指定をする
.chartForegroundStyleScale([
"hoge": .green, "piyo": .red
])
}
}
グループ化された棒グラフ
.positionを用いることでグループ化したchartを作れる
BarMark(
x: .value("Category", data.category),
y: .value("value", data.value)
)
.foregroundStyle(by: .value("name", dataSummary.name))
// nameごとにグループ化したchartを作る
.position(by: .value("name", dataSummary.name))
LineMark
折れ線グラフを描画するのに使用
Chart(hogeDataList) {
LineMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
}
LineMarkのイニシャライザ
複数のデータを扱う場合、以下のようにseries引数を用いることで区別できる。これを指定しない場合、線がつながってしまうので注意。
Chart(dataSummaryList) { dataSummary in
ForEach(dataSummary.dataList) { data in
LineMark(
x: .value("Category", data.category),
y: .value("value", data.value),
series: .value("name", dataSummary.name) // データの区別
)
}
}
series引数を使わなくても.foregroundStyleを使うことで分けることは可能。
LineMark(
x: .value("Category", data.category),
y: .value("value", data.value)
)
.foregroundStyle(by: .value("name", dataSummary.name))
PointMark
散布図に使ったり、他のMarkと組み合わせて使うことが多そう
Chart(hogeDataList) {
PointMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
}
LineMarkとPointMarkの組み合わせ
LineMarkと組み合わせる場合、以下のように書くことも可能だが、
Chart(hogeDataList) {
LineMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
PointMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
}
折れ線でPointを表示したい場合は.symbolのみで表示することも可能
LineMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
.symbol(.circle)
PointMarkの別のイニシャライザ
init<X>(
x: PlottableValue<X>, // x軸の値
y: CGFloat? = nil // yの位置。
) where X : Plottable
Chart(hogeDataList) {
PointMark(
x: .value("value", $0.value)
)
}
.frame(height: 100)
AreaMark
面グラフを作れる
let cheeseburgerCostByItem: [Food] = [
.init(name: "Burger", price: 0.07, year: 1960),
.init(name: "Cheese", price: 0.03, year: 1960),
.init(name: "Bun", price: 0.05, year: 1960),
.init(name: "Burger", price: 0.10, year: 1970),
...
]
...
Chart(cheeseburgerCost) {
AreaMark(
x: .value("Date", $0.date),
y: .value("Price", $0.price)
)
}
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 10.53.26](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F093f8ae1-860d-cd36-0649-0b5f1aa8237e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ab5fbffab50cf99c966c072c3edb08e7)
foregroundStyleを使って積み上げ面グラフを作ったりも可能
Chart(cheeseburgerCostByItem) {
AreaMark(
x: .value("Date", $0.date),
y: .value("Price", $0.price)
)
.foregroundStyle(by: .value("Food Item", $0.name))
}
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 10.55.06](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F830aea84-ba36-cefe-8895-e278f3229e93.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=38c612eabef804bfeb7fd53a316b2678)
AreaMarkのイニシャライザ1
イニシャライザを見ると他にも引数がある
init<X, Y, S>(
x: PlottableValue<X>,
y: PlottableValue<Y>,
series: PlottableValue<S>, // データの区別
stacking: MarkStackingMethod = .standard // stackの方法
) where X : Plottable, Y : Plottable, S : Plottable
正規化した面グラフも作れる
Chart(cheeseburgerCostByItem) {
AreaMark(
x: .value("Date", $0.date),
y: .value("Price", $0.price),
stacking: .normalized // 正規化
)
.foregroundStyle(by: .value("Food Item", $0.name))
}
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 10.57.13](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F77df1f79-a5b2-fd6d-7929-4882416a9cf9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d6697a98fcfa779f9b3eab541d18cc54)
AreaMarkのイニシャライザ2
Y軸の開始位置と終了位置を指定したグラフを作れる
init<X, Y>(
x: PlottableValue<X>,
yStart: PlottableValue<Y>, // y軸での面の開始位置
yEnd: PlottableValue<Y> // y軸での面の終了位置
) where X : Plottable, Y : Plottable
let data: [Weather] = [
.init(month: 1, maximumTemperature: 10, minimumTemperature: 0),
.init(month: 2, maximumTemperature: 12, minimumTemperature: 1),
.init(month: 3, maximumTemperature: 15, minimumTemperature: 6),
...
]
...
Chart(data) {
AreaMark(
x: .value("Date", $0.date),
yStart: .value("Minimum Temperature", $0.minimumTemperature),
yEnd: .value("Maximum", $0.maximumTemperature)
)
}
![スクリーンショット 2024-05-21 0.09.19](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff0cdd8e1-7bc3-52e8-bc47-16504fba2606.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a61c5cb8f73933ffd4b553c662fd4f0)
RuleMark
水平、垂直の罫線を使用してデータを表す
RuleMarkのイニシャライザ1
init<X>(
x: PlottableValue<X>, // X軸上の罫線の表示位置
yStart: CGFloat? = nil, // 罫線の開始位置
yEnd: CGFloat? = nil // 罫線の終了位置
) where X : Plottable
Chart(sales) {
BarMark(
x: .value("Profit", $0.profit),
y: .value("Department", $0.department)
)
RuleMark(x: .value("average", 100000))
.foregroundStyle(.red)
}
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 11.58.25](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fe91397cb-00f4-6929-b0e2-ed5316a432df.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=faedc01cfcc847da8808b8c76717fe44)
yStart, yEndも入れると長さを調整できる↓
RuleMark(x: .value("average", 100000), yStart: 100, yEnd: 300)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.03.04](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F2835060c-0c31-7bc3-94cf-0bc85b6a015c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d4718653419de22f173f63e4f1c8f30c)
RuleMarkのイニシャライザ2
init<X, Y>(
x: PlottableValue<X>, // X軸上の罫線の表示位置
yStart: PlottableValue<Y>, // 罫線の開始位置
yEnd: PlottableValue<Y> // 罫線の終了位置
) where X : Plottable, Y : Plottable
RuleMark(
x: .value("Pollen Source", $0.source),
yStart: .value("Start Date", $0.startDate),
yEnd: .value("End Date", $0.endDate)
)
RuleMark(
y: .value("average", averageDate)
)
.foregroundStyle(.red)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 11.48.42](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fbf7166a2-053f-bfb1-8c5a-6a362c308f89.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bbb56119f66de4144df7133ac9146120)
RuleMarkのイニシャライザ3
init<Y>(
x: CGFloat? = nil,
yStart: PlottableValue<Y>,
yEnd: PlottableValue<Y>
) where Y : Plottable
RuleMark(
yStart: .value("Start Date", data[0].startDate),
yEnd: .value("End Date", data[0].endDate)
)
RuleMark(
x: 60, // 指定した位置に表示する
yStart: .value("Start Date", data[1].startDate),
yEnd: .value("End Date", data[1].endDate)
)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.18.15](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fe540c5f4-08cc-1d43-2d23-d3dc7219a82c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=87245565fd603fb2c489826cac87bb8c)
RectangleMark
ヒートマップなどに使う
RectabgleMarkのイニシャライザ1
init<X, Y>(
x: PlottableValue<X>,
y: PlottableValue<Y>,
width: MarkDimension = .automatic, // Markのwidth
height: MarkDimension = .automatic // Markのheight
) where X : Plottable, Y : Plottable
var data: [MatrixEntry] = [
.init(positive: "+", negative: "+", num: 125),
.init(positive: "+", negative: "-", num: 10),
.init(positive: "-", negative: "-", num: 80),
.init(positive: "-", negative: "+", num: 1)
]
public var body: some View {
Chart(data) {
RectangleMark(
x: .value("Positive", $0.positive),
y: .value("Negative", $0.negative)
)
.foregroundStyle(by: .value("Number", $0.num))
}
.aspectRatio(contentMode: .fit)
.padding()
}
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.47.58](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F99e62e79-7cfe-e329-e824-570cf47c211d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3fad516b24866f9c7c06d5a63d9d9f8a)
Chart(data) {
RectangleMark(
x: .value("Rect X", 3),
y: .value("Rect Y", 3),
width: .fixed(25),
height: .fixed(25)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
.aspectRatio(contentMode: .fit)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.56.24](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F24400cfd-e8a1-fde5-48a1-1e3931fb2831.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=79b4e97571e487530ab0ed799fdce66a)
RectabgleMarkのイニシャライザ2
init<X, Y>(
x: PlottableValue<X>, // X軸上の位置
yStart: PlottableValue<Y>, // Y軸上の開始位置
yEnd: PlottableValue<Y>, // // Y軸上の終了位置
width: MarkDimension = .automatic
) where X : Plottable, Y : Plottable
RectangleMark(
x: .value("Rect X", 4),
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4),
width: .fixed(30)
)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.50.31](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F9f477cd5-e41e-7690-3395-6f83429d69c4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=abf97a195addc39f13790c456e34066c)
RectabgleMarkのイニシャライザ3
init<X, Y>(
xStart: PlottableValue<X>,
xEnd: PlottableValue<X>,
yStart: PlottableValue<Y>,
yEnd: PlottableValue<Y>
) where X : Plottable, Y : Plottable
RectangleMark(
xStart: .value("Rect xStart", 2),
xEnd: .value("Rect xEnd", 4),
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4)
)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 12.53.14](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F810625f9-caae-bead-d94c-ff4edb312a3e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4ac54c6946c9df6b2abbfe7ed08758fb)
RectabgleMarkのイニシャライザ4
init<X>(
x: PlottableValue<X>,
yStart: CGFloat? = nil,
yEnd: CGFloat? = nil,
width: MarkDimension = .automatic
) where X : Plottable
RectangleMark(
x: .value("Rect X", 3)
)
RectangleMark(
y: .value("Rect Y", 1)
)
.foregroundStyle(.red)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 13.03.09](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F50230d26-65db-9415-2526-09c9e712b47a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=176f04d9404e3f40c6812697e7b7d4fe)
RectabgleMarkのイニシャライザ5
init(
xStart: CGFloat? = nil,
xEnd: CGFloat? = nil,
yStart: CGFloat? = nil,
yEnd: CGFloat? = nil
)
RectangleMark()
.opacity(0.2)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 13.04.28](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F2b59721d-b949-3bb1-bd45-bd82fd63e0e3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=36aeed24209f8fe565da1801c5ccfd61)
RectabgleMarkのイニシャライザ6
init<Y>(
xStart: CGFloat? = nil,
xEnd: CGFloat? = nil,
yStart: PlottableValue<Y>,
yEnd: PlottableValue<Y>
) where Y : Plottable
RectangleMark(
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4)
)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-11 at 13.05.55](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F210d19aa-5030-3d5c-7197-daa496a88a59.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5f2872efacc335dcca7976d6dc1b01fa)
SectorMark
扇形グラフ(円グラフ・ドーナツグラフ)を描画する
init(
angle: PlottableValue<some Plottable>, // データの値
innerRadius: MarkDimension = .automatic, // 内円の半径の大きさ
outerRadius: MarkDimension = .automatic, // 外円の半径の大きさ
angularInset: CGFloat? = nil // 項目ごとの区切りの大きさ
)
引数angleに値を入れることで自動的に正規化された状態で表示される
.foregroundStyle
などでカテゴリーごとに色を変えないと全て青になるので注意
Chart(data) {
SectorMark(angle: .value("Value", $0.sales))
.foregroundStyle(by: .value("Food Category", $0.name))
}
![スクリーンショット 2024-05-25 12.19.29](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F273c6db5-efa4-342a-1ce8-7f8eca4ec2cf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5399a6f02c782472907eb28ad4ae884a)
innerRadiusを指定すると内円ができ、outerRadiusを指定すると外円ができる
Chart(data) {
SectorMark(
angle: .value("Value", $0.sales),
innerRadius: .ratio(0.6),
outerRadius: .inset(60),
angularInset: 1
)
.foregroundStyle(by: .value("Food Category", $0.name))
}
![スクリーンショット 2024-05-25 12.27.45](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F9967abf4-0b08-f6cd-3daa-3b49343487ca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1bce8010b2beff4c1e0895454db02968)
chartBackgroundを使って内円の中心にTextを表示することもできる
Chart {
SectorMark(...)
}
.chartBackground { chartProxy in
GeometryReader { geometry in
let frame = geometry[chartProxy.plotAreaFrame]
VStack {
Text("Most Sold Style")
.font(.callout)
.foregroundStyle(.secondary)
Text("Cachapa")
.font(.title2.bold())
.foregroundStyle(.primary)
}
.position(x: frame.midX, y: frame.midY)
}
}
![スクリーンショット 2024-05-25 12.45.35](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff24b965b-3800-f210-1e41-1a0204cf4b9a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a240799d75e2641e600d8f87312ef882)
ChartContentで使えるメソッド
BarMarkやLineMarkなどのMarkはChartContentプロトコルに準拠している。
このChartContentに定義されているメソッドを通じてMarkのカスタマイズができる。
スタイリング系
グラフの色を変える
BarMark(
...
)
.foregroundStyle(.red)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 12.48.28](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F23723be0-c42b-7441-884d-347edec49408.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b67afa4943ee12d14ee1d5db035cbeee)
ShapeStyleを指定するのでグラデーションの指定も可能
BarMark(
...
)
.foregroundStyle(
LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .top, endPoint: .bottom)
)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 12.59.11](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F924e9bec-b628-1a42-6c23-8bed4e64119b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7b77e7f56108d14f6a101c02dd344c05)
styleをplotAreaに適用する
MarkのstyleをplotArea(表示領域)全体に合わせる
Markにグラデーションを適用した場合、plotArea全体をグラデーションの開始点/終了点に利用することになる
BarMark(
...
)
.foregroundStyle(
LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .top, endPoint: .bottom)
)
.alignsMarkStylesWithPlotArea()
一番左のMarkを見ると先ほどのMarkよりグラデーションのかかり方が異なるのがわかる
不透明度の設定
BarMark(
...
)
.opacity(0.3)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 12.56.20](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F1fd9559b-3593-bbff-9bd3-41b896423430.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e468327347dc7319a3c3c6cab03eb259)
角丸にする
BarMark(
...
)
.cornerRadius(15)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 13.17.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F0fd8ca57-4592-6cbd-3db0-6125528a64d0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8146d10820c17eaa2553ab860da9d5a4)
LineMarkのスタイルの設定
StrokeStyleに準拠していればいいので色々設定できそう。
LineMark(
...
)
// 線の太さを変更
.lineStyle(.init(lineWidth: 10))
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 15.31.34](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F20682f28-d357-fc80-3569-128260529b57.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e86e6e671f5713f9af03367d89c53194)
曲線などにする
指定した補間(データポイント間の線や曲線を滑らかにする処理)方法でLineMarkとAreaMarkを描画する
LineMark(
...
)
// 滑らかな曲線
.interpolationMethod(.catmullRom)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 15.42.15](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F6644efe2-a964-3c13-b812-de911ca07bb3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aa8ffe0006e947572301fda5d356eff4)
- .linear
- 直線
- .catmullRom
- 滑らかな曲線
- .catmullRom(alpha:)
- 曲線の形状を制御する。0~1の間で値が高いほど曲線がデータポイントを厳密に通過しようとし、低いほどより滑らかな曲線になる(データポイントから外れる?)
- .cardinal
- .catmullRomより緩やかな曲線
- .cardinal(tension:)
- tension(張力)を指定できる。0~1の間で値が低いほど滑らかになり、高いほど直線になる
- .monotone
- 例外な値があっても不自然なひねりを避ける滑らかな曲線
- .stepCenter
- 階段状に表示する。データポイントはステップの中心になる
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 15.49.17](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fefe43f58-e7fe-2200-3526-2091d3398a94.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=67fdf91f39ef81f40982d032279a50a6)
- .stepStart
- 階段状に表示する。データポイントはステップの開始位置になる
- .stepEnd
- 階段状に表示する。データポイントはステップの終了位置になる
グラフの後ろにViewを定義する
Chart {
...
}
.chartBackground { _ in
Rectangle()
.frame(width: 200, height: 100)
.foregroundColor(.red)
}
![スクリーンショット 2024-05-12 20.18.53](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fa2883da0-12d4-fd04-3d4b-b89ba5753cbc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c4e9e776ba1e8d2ed4d368790b74733)
グラフの前面にViewを定義する
Chart {
...
}
.chartOverlay { _ in
Rectangle()
.frame(width: 200, height: 100)
.foregroundColor(.red)
}
![スクリーンショット 2024-05-26 11.06.03](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7790dccb-d135-36aa-5e62-cd5bdafdcfe2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7575233ed4439640be6379b706a8313f)
カテゴリに基づいてグラフを指定した色にする
Chart(salesByCityData) { citySale in
ForEach(citySale.sales) {
BarMark(
x: .value("Day", $0.weekday, unit: .day),
y: .value("Sales", $0.sales)
)
.foregroundStyle(by: .value("City", citySale.city))
}
}
// カテゴリーに対して異なる色を指定する
.chartForegroundStyleScale([
"Cupertino": .green, "San Francisco": .red
])
![スクリーンショット 2024-05-12 20.23.28](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fb8a0a98a-b594-a28c-e1c0-b2f32fb0a3e7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ab0f5216787ebf9fff3e8f09afbaa203)
複数の指定方法がある(詳細はドキュメント)
struct StorageChartView: View {
struct FileCategory {
let fileSizePercent: Double
let fileCategory: String
let color: Color
}
let data: [FileCategory] = [
.init(fileSizePercent: 50, fileCategory: "Applications", color: .red),
.init(fileSizePercent: 10, fileCategory: "Photos", color: .orange),
.init(fileSizePercent: 5, fileCategory: "Music", color: .yellow),
.init(fileSizePercent: 3, fileCategory: "Podcasts", color: .green),
.init(fileSizePercent: 10, fileCategory: "iOS", color: .gray),
.init(fileSizePercent: 10, fileCategory: "System Data", color: .black),
]
var body: some View {
Chart(data, id: \.fileCategory) {
BarMark(
x: .value("File Size Percent", $0.fileSizePercent)
)
.foregroundStyle(by: .value("File Category", $0.fileCategory))
}
.chartForegroundStyleScale(domain: data.map { $0.fileCategory }, range: data.map { $0.color })
.chartXAxis(.hidden)
.frame(height: 50)
.padding()
}
}
![スクリーンショット 2024-05-12 20.40.26](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F341ac572-4fac-f4b8-9be3-aa9801d65707.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6ca0225b3bc867cbb8b0ccaff5111f5f)
plotAreaのスタイリングをする
Chart {
...
}
.chartPlotStyle { content in
content
.background(.gray.opacity(0.2)) // 背景色を追加
.border(.black) // 境界線を追加
}
![スクリーンショット 2024-05-12 20.53.34](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F4290ced0-a6f9-9fb7-60a4-a12bd12ce106.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=258a335b97519b6796a229f1c9f8e8fb)
位置系
offset
Markの位置をずらす
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value)
)
// 右に50、下に50ずらす
.offset(CGSize(width: 50, height: 50))
// .offset(x: 50, y: 50)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 16.04.57](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fb2cb1857-3290-b6ca-805b-5334b69de0fa.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4b39dac63e29fcda4d74e5419817c397)
offset(x:yStart:yEnd:)
MarkのY軸の開始位置と終了位置のそれぞれに異なるoffsetを指定し、さらにX軸にoffsetを指定できる。
BarMark(
...
)
.offset(x: 0, yStart: 0, yEnd: 10)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 16.18.50](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fc8277230-d8f2-e1c3-9b9b-5b32fee4447a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ab51172636f353319c029bc25c271add)
offset(xStart:xEnd:y:)
MarkのX軸の開始位置と終了位置のそれぞれに異なるoffsetを指定し、さらにY軸にoffsetを指定できる
BarMark(
...
)
// 各MarkのX軸の終了位置を20右にずらす
.offset(xStart: 0, xEnd: 20, y: 0)
![Simulator Screenshot - iPhone 15 - 2024-05-04 at 16.15.20](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fdc579b90-cd6d-0843-3fbc-7d202f6ecc9b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7eae971923b2da43902de928251bf9b3)
offset(xStart:xEnd:yStart:yEnd:)
Markのx軸とy軸それぞれの開始位置と終了位置を指定できる
シンボルの外観の設定
シンボルの外観を変える
指定できるのはChartSymbolShapeに準拠したもの
PointMark(
...
)
.symbol(.asterisk)
- .symbol(.asterisk) アスタリスク
![スクリーンショット 2024-05-11 15.41.21](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F76854a10-64fe-2711-ba61-7ff16e147a40.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c0fa830b2ae82262fb03321c84e8da90)
- .symbol(.circle) 円
![スクリーンショット 2024-05-11 15.43.10](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F9b2531a3-a7b8-f39e-a675-e4df2e9dd7b4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6fb41c5e8315179693f7511428a99e37)
- .symbol(.cross) クロス(×)
![スクリーンショット 2024-05-11 15.43.56](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F33380ff5-a92c-2659-9ae1-3cab27f1e076.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a71e5b5ffb7b2334385eb25d7c17588e)
- .symbol(.diamond) ひし形
![スクリーンショット 2024-05-11 15.47.40](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fdf8808e4-6ba1-b303-de44-c7f20f183e5b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=16f43ebc924fbcdc752e7bed3fc219ae)
- .symbol(.pentagon) 五角形
![スクリーンショット 2024-05-11 15.47.58](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F4fc06911-3305-8ecf-eeb8-dc2aa130d84e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e8cd98512d863cbc57cd3fd3fb995789)
- .symbol(.plus) プラス(+)
![スクリーンショット 2024-05-11 15.48.23](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fcd2f552e-9e8f-becb-83a1-146dcf3b19f9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=335d4a1cbb5cb483cb21af260c2f8df3)
- .symbol(.square) 四角
![スクリーンショット 2024-05-11 15.48.46](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7b8758f1-f7a4-c78c-9cbd-7a869bd33cbd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a038666c5116391affec13f4db961e6)
- .symbol(.triangle) 三角
![スクリーンショット 2024-05-11 15.49.00](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff40844c2-008d-a386-5324-818e48788cc2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dd24eeb6be93f06b84b78aead5182ab1)
シンボルの線の太さを変えることや、破線にすることなども可能
.symbol(.circle.strokeBorder(lineWidth: 1))
![スクリーンショット 2024-05-11 15.58.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F60457ea1-a67e-5ad2-48d5-eb223206a463.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fc9fba6bb28021d4deff9d07b8324ef4)
.symbol(.circle.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [2, 2])))
![スクリーンショット 2024-05-11 16.00.50](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F75c9d630-9807-5cff-3c02-edb3be1e4835.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=34312f2c6d6dd8b4fa4e381326eb278b)
任意のViewをシンボルにする
PointMark(
...
)
.symbol {
Image(systemName: "heart.fill")
.foregroundStyle(.red)
}
![スクリーンショット 2024-05-11 16.06.21](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F6fb452cb-025c-58eb-82bf-ab5b04cffa59.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=be4a2aa5ae07a402b1183856e8ec4134)
シンボルサイズの変更
PointMark(
...
)
.symbol(.circle)
.symbolSize(10)
![スクリーンショット 2024-05-11 16.09.13](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F57ae23de-0dc8-2ea2-e5db-b024ee5e3183.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f903f4ed1427302070620439bdba8885)
小さくすることはいくらでも可能っぽいが、確認した限り一定値以上は大きくできない。
また、独自のシンボルを設定した場合はサイズが適用されない(独自シンボルのView側で指定すればよさそう)
カテゴリーごとに異なるシンボルを設定する
var salesByCityData: [SalesByCity] {[
.init(city: "Cupertino", sales: cupertinoData),
.init(city: "San Francisco", sales: sfData)
]}
...
Chart(salesByCityData) { citySale in
ForEach(citySale.sales) {
PointMark(
x: .value("Day", $0.weekday, unit: .day),
y: .value("Sales", $0.sales)
)
.foregroundStyle(by: .value("City", citySale.city))
.symbol(by: .value("City", citySale.city))
}
}
// カテゴリーに対して異なるシンボルを適用する
.chartSymbolScale([
"Cupertino": Circle(), "San Francisco": Circle().strokeBorder(lineWidth: 1)
])
![スクリーンショット 2024-05-26 12.28.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F377338bf-48fa-eac7-ce34-b7fb90403357.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=56ef1ff50032af6d81dbdefc73674f22)
カテゴリーごとに異なるシンボルサイズを適用する?
chartSymbolSizeScale(_:)というのがあるが、使い方がよくわからない
データごとに外観を変える
foregroundStyle(by:)
指定したデータの値ごとに異なる色やスタイルを適用する
BarMark(
x: .value("Department", $0.department),
y: .value("Profit", $0.profit)
)
.foregroundStyle(by: .value("Department", $0.department))
![スクリーンショット 2024-04-09 0.49.42](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fba0aafa6-3297-e913-fef1-64d26f8c47e2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a9d7175def979e4cc80ecc0f4eb416da)
lineStyle(by:)
指定したデータの値ごとに異なる線のスタイル(実線や破線)を適用する
Chart(departmentProfits) { departmentProfit in
ForEach(departmentProfit.profitOverTIme, id: \.date) {
LineMark(
x: .value("Date", $0.date, unit: .month),
y: .value("Profit", $0.profit)
)
.lineStyle(by: .value("departmentName", departmentProfit.name))
}
}
![スクリーンショット 2024-04-09 1.02.42](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Faa6118c3-cb68-bda0-3b40-f941fcad15f8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b37ac765b35556718c2d905fd9c57da3)
chartLineStyleScale
lineStyle(by:)
に加え、具体的にどのスタイルを適用するかを指定する
Chart(departmentProfits) { departmentProfit in
ForEach(departmentProfit.profitOverTIme, id: \.date) {
LineMark(
x: .value("Date", $0.date, unit: .month),
y: .value("Profit", $0.profit)
)
.lineStyle(by: .value("departmentName", departmentProfit.name))
}
}
.chartLineStyleScale([
"A": StrokeStyle(lineWidth: 2),
"B": StrokeStyle(lineWidth: 5, dash: [5, 5])
])
![スクリーンショット 2024-05-26 13.18.09](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fbd5d5529-da63-a13a-9da2-21366d6238db.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ac5061b67dfbcc94a2c1c72652ffd4a0)
position(by:axis:span:)
指定したデータの値ごとにMarkの位置を決定する
axisで.horizontalと.verticalのどちらに沿ってMarkを配置するかを決める
spanでMarkが占める範囲を指定する(MarkDimension)
ForEach(stackedBarData) { shape in
BarMark(
x: .value("Shape Type", shape.type),
y: .value("Total Count", shape.count)
)
// 各BarMark内の要素に応じて色を変える
.foregroundStyle(by: .value("Shape Color", shape.color))
// 指定したデータごとにMarkの位置をずらす(.horizontal)
.position(by: .value("Shape Color", shape.color), span: .fixed(100))
}
![スクリーンショット 2024-04-09 1.20.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F1066ae4d-7afd-23c2-9964-a6f417d9a78f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0699f073197a9b5f5e7f2dbc7336dc82)
axisで.verticalを指定すると通常の縦型になる
.position(by: .value("Shape Color", shape.color), axis: .vertical ,span: .fixed(100))
symbol(by:)
指定したデータの値ごとに異なるシンボルを設定する
ForEach(departmentProfit.profitOverTIme, id: \.date) {
LineMark(
x: .value("Date", $0.date, unit: .month),
y: .value("Profit", $0.profit)
)
.symbol(by: .value("departmentName", departmentProfit.name))
}
symbolSize(by:)
指定したデータの値ごとに異なるサイズのシンボルを設定する
Chart(participants, id: \.age) { participant in
PointMark(
x: .value("Age", participant.age),
y: .value("Weight", participant.weight)
)
.symbolSize(by: .value("Weight", participant.weight))
}
![スクリーンショット 2024-05-11 16.39.10](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F9668df99-3fd7-9377-81e2-662f9496883f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4e8798a6c957b83049eb811d274e39a7)
注釈をつける
annotation(position:alignment:spacing:content:)
Markに対してViewで注釈をつけれる
- position: Markに対する相対的な位置
- alignment: 位置
- spacing: Markからどのくらい離すか
Chart(sales) { sale in
BarMark(
x: .value("Department", sale.department),
y: .value("Profit", sale.profit)
)
.annotation(position: .top, alignment: .center, spacing: 20) {
Text("利益: \(sale.profit)")
.font(.caption)
.frame(width: 100, height: 40)
.background(.gray)
}
}
![スクリーンショット 2024-04-09 2.12.59](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F1fcc7e2d-94bb-d8d6-e1f2-19bda59fa062.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0c73c27f4e3ef031b5d0355209bdf2c7)
Maskingとclipping
Maskする
チャートのコンテンツの一部を強調したり、特定の範囲のみ表示するために使用
BarMark(
x: .value("Department", sale.department),
y: .value("Profit", sale.profit)
)
.mask {
if sale.department == "Marketing" {
RectangleMark()
} else {
RectangleMark()
.foregroundStyle(Color.black.opacity(0.5))
}
}
![スクリーンショット 2024-05-11 17.03.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff9b26e08-e735-23f4-e9a0-baa25d36f3c4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7a614bba8523c0aede31eba83d758631)
角丸などにclippingする
Shapeに準拠していればいいので他にもいろんな形状にクリッピングできそう
BarMark(
...
)
.clipShape(.rect(
topLeadingRadius: 20,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 20
))
![スクリーンショット 2024-05-11 17.05.09](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fa72ded94-c68d-4b85-ed03-d766ed447606.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=467a9cde2c17b98c60892ebaa9f9f7e7)
Accessibilityの設定
Instance Methods
annotation(position:alignment:spacing:overflowResolution:content:)
注釈をつけるannotation(position:alignment:spacing:content:)と同じだが、overflowResolution引数が追加された。
通常だとPlotArea内に注釈を表示するが、グラフのPlotArea外に表示することが可能になる
iOS17+
LineMark(...)
...
.annotation(
position: .top,
spacing: 0,
overflowResolution: .init(
x: .fit(to: .chart), // X軸では注釈がグラフの端の境界を超えないようにfitさせる
y: .disabled // Y軸では注釈がグラフのすぐ上に来るようにするようにオーバーフロー解決を無効にする
)
) {
Text(...)
}
Markをぼかす
特定のデータを強調表示して他の部分を目立たなくするために使用できる
iOS 16.4+
BarMark(
...
)
.blur(radius: 4)
![スクリーンショット 2024-04-10 2.42.40](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff900f7d0-9ef2-6deb-693f-7bce24c0b77c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=512295ddcf1c19a9c1c694702d030fbe)
各Markに対して処理を行う
iOS17+
BarMark(
...
)
.compositingLayer {
$0.opacity(0.5)
}
![スクリーンショット 2024-05-12 12.44.48](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F35ac4cc9-6795-e2da-462a-740ed7a98305.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cd59a5b1401ae4669e5de51e0c2f7b8e)
Markに影をつける
iOS16.4+
BarMark(
...
)
.shadow(color: .red, radius: 2, x: 3, y: 5)
重なっているMarkの表示順を指定する
指定する値が大きいほど手前に来る
BarMark(
...
)
.zIndex(2) // BarMarkが手前
AreaMark(
...
)
.foregroundStyle(.red)
.zIndex(1)
![スクリーンショット 2024-04-10 3.01.49](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fa368c5e9-dbbb-dbc5-f7f6-8847dbf172f2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=facca08554256efa0e87f3c920520858)
MarkStacking Method
MarkをStackする方法を指定する。BarMarkなどのMarkの一部のイニシャライザなどで指定することが可能。ドキュメント見ると良さそう
BarMark(
x: .value("Day", $0.weekday, unit: .day),
y: .value("Sales", $0.sales),
stacking: .standard // BarMarkでいうこの部分
)
.foregroundStyle(by: .value("City", citySale.city))
- .standard
- 通常のStack方法
![スクリーンショット 2024-04-10 3.14.47](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Ff3ee6a50-0626-2b7b-b05c-96d41a328971.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b9270cfd70ab9a7bea84fa07c12880c2)
- .center
- 各Markの中心点が中央に来るようにする
![スクリーンショット 2024-04-10 3.18.27](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F88471d6c-eeed-907d-347e-dd216fd6f471.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c6fee5ac1ef36c1070ec654e1560eb57)
- .normalized
- 正規化する(各MARKの合計値を100%とする)
![スクリーンショット 2024-04-10 3.19.47](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F423a93db-9417-0770-15bb-906bf935f2ce.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7ca59e9673bb598fe901dd73cb5ac4c1)
- unstacked
- MarkをStackしない
通常、値が重なっているとMarkが上にstackされ、その2つの合計値が表示される
- MarkをStackしない
var sales: [Sale] = [
// 同じ値が2つある場合
.init(department: "Finance", profit: 200),
.init(department: "Finance", profit: 200),
.init(department: "Marketing", profit: 500),
.init(department: "Production", profit: 150)
]
...
BarMark(
x: .value("Department", sale.department),
y: .value("Profit", sale.profit),
stacking: .standard
)
![スクリーンショット 2024-05-11 19.07.51](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7bc6b890-0309-9df6-d302-55bd5021f451.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=23b2902012637f8947a6a9574dd14054)
.unstackedにすることで、上にstackされないようになる
BarMark(
x: .value("Department", sale.department),
y: .value("Profit", sale.profit),
stacking: .unstacked
)
![スクリーンショット 2024-05-11 19.11.33](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fc631da5a-04e2-43ae-822f-5beb92e4bed1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0107c7dadce6335e05fdaef548b38107)
MarkDimension
各Markのwidthかheightを表す寸法
BarMarkのイニシャライザで横幅を指定するときなどに使用。
BarMark(
x: .value("Category", $0.category),
y: .value("value", $0.value),
width: .fixed(30), // 横幅を30に固定
stacking: .center // 各Markの中心点が中央に来るように
)
- init(floatLiteral: Double)
- Double型から直接幅を指定する
- init(integerLiteral: Int)
- Int型から直接幅を指定する
- fixed(CGFloat) → MarkDimension
- 固定値として幅を指定する
- inset(CGFloat) -> MarkDimension
- step size(Markごとに割り当てられた間隔)の両側からどの程度間隔を大きくするか
- ratio(CGFloat) → MarkDimension
- step sizeに対しての比率で幅を指定する
PlottableValue
chartにplot(表示)するラベル付きのデータのこと。
↓でいう.value()のこと。
BarMark(
x: .value("Category", $0.category), // この.value
y: .value("Quantity", $0.value)
)
時間をデータとして使用する場合、その時間のどの要素を使用するか指定できる
.value("Date", item.date, unit: .day)
色んな指定方法があるので詳細はドキュメントを参照
Plot
複数のMarkを1つにまとめ、複合的なグラフを作成するたのメカニズム。Chart{}を使うと必然的に内部で使っている(?)
ChartとPlotは同じChartContentなので、以下のような記述もできる。
struct Chart<Content> where Content : ChartContent
struct Plot<Content> where Content : ChartContent
Chart {
Plot {
BarMark(x: .value("a", 1), y: .value("e", 2))
}
}
おそらく独自のMarkを作成するために使用する
struct CustomMark: ChartContent {
let xValue: PlottableValue<String>
let yValue: PlottableValue<Double>
var body: some ChartContent {
Plot {
LineMark(x: xValue, y: yValue)
PointMark(x: xValue, y: yValue)
}
}
}
...
public var body: some View {
Chart(sales) {
CustomMark(xValue: .value("Department"$0.department), yValue: .value("Profit", $0.profit))
}
}
![スクリーンショット 2024-05-11 19.32.02](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F72fd82b8-04a2-c6c2-20bc-b7e4e77828d6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=41a5ed26d0f31bbda61d9a18114a6725)
軸のカスタマイズ
ここでは以下のグラフを基に軸をカスタマイズしていく
let data: [Sales] = [
.init(date: date(2023, 1, 1), sales: 4000),
.init(date: date(2023, 2, 1), sales: 3900),
.init(date: date(2023, 3, 1), sales: 4100),
.init(date: date(2023, 4, 1), sales: 4060),
.init(date: date(2023, 5, 1), sales: 4200),
.init(date: date(2023, 6, 1), sales: 4400),
.init(date: date(2023, 7, 1), sales: 4200),
.init(date: date(2023, 8, 1), sales: 3900),
.init(date: date(2023, 9, 1), sales: 3960),
.init(date: date(2023, 10, 1), sales: 4010),
.init(date: date(2023, 11, 1), sales: 4100),
.init(date: date(2023, 12, 1), sales: 3000)
]
...
Chart(data, id: \.date) {
BarMark(
x: .value("Month", $0.date, unit: .month),
y: .value("Sales", $0.sales)
)
}
.frame(width: 300, height: 300)
![スクリーンショット 2024-05-11 23.45.28](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F6639d566-7c61-33e3-d2d7-b06c51525969.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=14d0f4f93cbd7dd12022db009c16fd21)
軸の基本構成
.chartXAxis、.chartYAxisで各軸のカスタマイズをする。
基本的にAxisMarksを定義し、その中で軸の目盛りやラベルのスタイル、位置などを定義する
Chart {
...
}
.chartXAxis {
AxisMarks {
... // 軸の要素を定義する
}
}
.chartYAxis {
AxisMarks() // 引数も何も指定しない場合はデフォルトの状態を提供する
}
AxisMarks
複数のイニシャライザが存在する。ここでは一部だけ掲載。
AxisMarksのイニシャライザ1
init(
preset: AxisMarkPreset = .automatic, // 目盛りなどに対する軸の位置
position: AxisMarkPosition = .automatic, // 上下左右での軸の位置
values: AxisMarkValues = .automatic, // Markをどのように配置するか
stroke: StrokeStyle? = nil // 線のスタイルを指定
) where Content == Never
全てにデフォルト引数があるので↓に該当
.chartYAxis {
AxisMarks {
...
}
AxisMarks()
}
AxisMarksのイニシャライザ2
Chart {
...
}
.chartYAxis {
AxisMarks(
format: Decimal.FormatStyle.Percent.percent.scale(1), // %表記
preset: .aligned, // データに対して整列
position: .leading, // 軸を左側に配置
values: .automatic(desiredCount: 3), // 可能であれば3つ配置
stroke: StrokeStyle(lineWidth: 3) // 線の太さを変更
)
}
![スクリーンショット 2024-05-12 0.19.19](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F1f0d80a9-c8a3-2918-98b2-e89e5d03e920.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5e47c4cdc01eddb2d6ba286477c88650)
引数valuesではAxisMarkValues型の値を指定する。
以下の指定が可能
.automatic(
desiredCount: 3, // 目標とするAxisMarkの数。分数とか綺麗な値にならない場合は指定した数値に必ずしもならない
roundLowerBound: true, // 軸の下限値を丸めるか。trueで0や5など綺麗な値になる
roundUpperBound: true // 軸の上限値を丸めるか。trueでより綺麗な値になる
)
.automatic(
minimumStride: 20, // 隣接するAxisMarkとの最小距離。大きくするとMarkの間隔が広がり、軸上のMarkの数が少なる
desiredCount: 3,
roundLowerBound: true,
roundUpperBound: true
)
.stride(
by: .hour, // 指定したカレンダーの単位に従って値を生成する
count: 2, // 指定した数の間隔で値を生成する
roundLowerBound: true,
roundUpperBound: true,
calendar: .curren //どのカレンダー(グレゴリオ暦やユリウス暦)に基づくか
)
.stride(
by: 5, // 指定した間隔で値を生成する
roundLowerBound: true,
roundUpperBound: true
)
AxisMarksのイニシャライザ3
表示する目盛りの値を指定できる。
AxisMarks(
values: [0, 1000, 1500, 5000]
)
![スクリーンショット 2024-05-12 0.23.54](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F41434340-f376-0f12-43fb-495373bad6bc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d29761b0f3a6bb754bb5d681fb4dce1e)
軸の要素を定義する
AxisMarksに定義するのはラベル、目盛り、グリッド線の3要素。
AxisMarks{}で何も定義してないと軸が空になる
Chart {
...
}
.chartXAxis {
AxisMarks {
// 空の場合
}
}
![スクリーンショット 2024-05-12 0.48.07](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fb80ce47f-8e17-837e-5c95-5d5b45991a12.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f73ae734b3a51da94f9af5fcf25de1f8)
ラベル
.chartXAxis {
AxisMarks {
AxisValueLabel() // ラベル
}
}
![スクリーンショット 2024-05-12 0.49.04](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fc03b50fb-c9f5-4ada-fb74-28b7bdd36dd2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=56d4b8f20ced1bc89afd7b03b3fca5d1)
目盛り
.chartXAxis {
AxisMarks {
AxisValueLabel()
AxisTick() // 目盛り
}
}
グリッド線
.chartXAxis {
AxisMarks {
AxisValueLabel()
AxisTick()
AxisGridLine() // グリッド線
}
}
![スクリーンショット 2024-05-12 0.55.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F64c25433-0713-6bf6-6a54-3f2443b14560.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2b1c1c89a577e0b81684d25e76f7b2ef)
軸の要素の色やフォントを変える
ラベル(AxisValueLabel), 目盛り(AxisTick), グリッド線(AxisGridLine)はAxisMarkプロトコルに準拠しているのでAxisMarks{}で定義できる。
AxisMarkプロトコルでは以下のようなmodifireが提供されている
AxisValueLabel() // ラベル
.font(.title3)
.foregroundStyle(.red)
.offset(x: 30)
AxisTick() // 目盛り
.foregroundStyle(.red)
AxisGridLine() // グリッド線
.foregroundStyle(.green)
![スクリーンショット 2024-05-12 1.06.44](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F30a04ec2-f1b9-e3b1-e00b-34e47da63909.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e11ad24f8d6d3755135ce8c9ac7ddd62)
ラベルのカスタマイズ
AxisValueLabelでは以下の設定が可能
AxisValueLabel(
centered: true, // 軸ラベルが目盛りに対して中心に配置されるか
anchor: .top, // ラベルのどの部分が指定した位置に固定されるか
multiLabelAlignment: .bottom, // 複数のラベルが存在する場合の水平方向での整列方法を指定
collisionResolution: .automatic, // ラベル間の衝突(重なり)を解決する方法を指定
offsetsMarks: true, // Labelの位置に応じて目盛りをずらすかを指定
orientation: .horizontal, // Labelの向きを指定。verticalで縦向きになる
horizontalSpacing: 10, // Label間の水平の距離を指定
verticalSpacing: 5 // Label間の垂直の距離を指定
)
指定した文字列を表示することも可能。データセットにはない文字列を扱う場合に使いそう
AxisValueLabel("label")
![スクリーンショット 2024-05-12 1.18.45](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fefce9441-5345-98e2-b19c-5c8251bf0b86.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=16c1eae854ea1801ff75b1175fa683c1)
ラベルのFormatの変更
// 時(h)で表示
AxisValueLabel(format: .dateTime.hour())
// 少数第二位まで表示
AxisValueLabel(format: Decimal.FormatStyle.number.precision(.fractionLength(2)))
// 四半期スタイルで表示(例: Q1 20223)
AxisValueLabel(format: .dateTime.year().quarter())
Label自体のViewを自分で設定する
AxisMarks { value in
AxisValueLabel {
// ここで定義したViewがLabelとして表示される
if let intValue = value.as(Int.self) {
HStack(spacing: 0) {
Text("\(intValue)")
.fixedSize()
Image(systemName: "heart.fill")
}
.foregroundStyle(.red)
}
}
}
![スクリーンショット 2024-05-12 11.58.43](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fab659d09-2443-dcac-eef0-93c61d67ae9d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6e703ae2d0d415a45081f1144759b86d)
目盛りのカスタマイズ
AxisTickでは以下の設定が可能
AxisTick(
centered: false, // 目盛りが軸ラベルに対して中心に配置されるか
length: 20, // 目盛の長さ (CGFloat型)
stroke: .init(lineWidth: 5) // 目盛り線のスタイル
)
![スクリーンショット 2024-05-12 11.11.31](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F72f41dc7-7e34-b656-9dd6-49368af7d911.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e241e0683c0ece50aeb5643005f23afa)
lengthはAxisTick.Length型での指定により動的に変更することも可能
AxisTick(
length: .automatic, // 目盛の長さ (AxisTick.Length型)
)
- .automatic
- 目盛りの長さを自動的に決定する
- .label
- Labelの幅と同じ長さにする
AxisMarks { value in
if value.index == value.count - 1 {
AxisValueLabel("長いラベル長いラベル", anchor: .topLeading)
} else {
AxisValueLabel(anchor: .topLeading)
}
AxisGridLine()
AxisTick(
centered: false,
length: .label, // .labelの幅と同じ長さ
stroke: .init(lineWidth: 2) // 目盛り線のスタイル
)
}
![スクリーンショット 2024-05-12 11.23.49](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7e915fbc-298b-1488-a809-5a5edfaa7a78.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1e6fbfce6aece3199b96c90aa171e3fd)
- .longestLabel
- 全ての目盛りの長さを、最も長いLabelの幅と同じ長さにする
![スクリーンショット 2024-05-12 11.25.22](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F836c1433-b20a-e70a-38f8-2c8ed8f6983a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=84aa76b254aa5dc26c48ccb94ed296a9)
グリッド線のカスタマイズ
AxisGridLineでは以下の設定が可能
AxisGridLine(
centered: true, // グリッド線が軸ラベルに対して中心に配置されるか
stroke: .init(lineWidth: 2, lineCap: .round, dash: [110]) // グリッド線のスタイル
)
![スクリーンショット 2024-05-12 11.34.35](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F8ff1f342-1d26-58ab-b04c-90f32daa4273.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=231f8685db2202db46d8eb447269388f)
データに応じて軸の内容を変える
AxisMarksではクロージャの引数としてAxisValue型のvalueを提供する。
.as()を用いて実際の型にキャストすることで、データの値に応じて軸の内容を変えることができる。
AxisMarks { value in
if let intValue = value.as(Int.self) {
if intValue > 2000 {
AxisValueLabel()
.font(.title)
AxisGridLine(stroke: .init(lineWidth: 5))
.foregroundStyle(.red)
} else {
AxisValueLabel(orientation: .vertical)
AxisGridLine()
}
}
}
![スクリーンショット 2024-05-12 1.29.07](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fa6bbdead-8d7c-49ce-2b2f-a9acfaaf6fca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c47f0fe9134042a34fe18a54e6228545)
また、データの総数を取得したり
AxisMarks { value in
if value.count > 5 { // データの総数
}
}
データのindexにもアクセスできるので、一番最初や最後の値を強調する時などに使える
AxisMarks { value in
// データのインデックス
if value.index == value.count - 1 {
// 一番最後のindexの場合はラベルを赤くする
AxisValueLabel()
.foregroundStyle(.red)
AxisGridLine(stroke: .init(lineWidth: 3, dash: [15, 15]))
} else {
AxisValueLabel()
}
}
![スクリーンショット 2024-05-12 1.42.42](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7b48799c-a6f8-33f0-6044-b919712a7eb2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=93f5720bcbf2c5612a7cc1462bf7141d)
軸のスタイルの設定
Chart {
...
}
.chartXAxisStyle { axis in
axis.opacity(0.5)
}
![スクリーンショット 2024-05-26 11.28.38](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F7289c968-9cc2-354d-e5ee-6cb4210f2242.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=68452195ec3fed4190428aed185bf5e8)
軸にラベルを追加する
Chart {
...
}
.chartXAxisLabel(position: .leading, alignment: .top, spacing: 20) {
Text("ラベルを追加できる")
.font(.title)
}
// .chartXAxisLabel("ラベルを追加できる", position: .leading, alignment: .top, spacing: 20)
![スクリーンショット 2024-05-26 11.49.42](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F4e82c918-7336-9eb1-69ac-c104cea4a79e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=02d4e46a4d9b036cea514bf2ca411c67)
データの表示範囲の指定
Chart {
...
}
.chartYScale(domain: 0...5000)
![スクリーンショット 2024-05-11 23.50.12](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fca924483-045f-2e1f-5d20-23e83586bcf4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6d15fa159e07c1cc280d01fe2cf01b5e)
各AxisMarkに対してそれぞれ処理を行う
AxisMarks {
AxisValueLabel()
AxisTick()
AxisGridLine()
}
.compositingLayer() {
$0.opacity(0.5) // 透明度を0.5
}
軸、凡例の非表示
Chart {
...
}
.chartXAxis(.hidden)
.chartYAxis(.hidden)
.chartLegend(.hidden)
凡例の位置を指定する
.chartLegend(
position: .top, // 凡例の位置
alignment: .trailing, // 右側に整列
spacing: 50 // 凡例とチャートとの幅
)
![スクリーンショット 2024-05-12 20.58.38](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fb377f0ac-0666-711e-2f2c-5d12b35a3cbb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1560898bd53550caec1b993adc16c25e)
凡例のViewを作る
.chartLegend(
position: .top,
alignment: .trailing,
spacing: 10
) {
HStack(spacing: 0) {
ForEach(salesByCityData) { citySale in
Image(systemName: "gearshape")
Text("\(citySale.city)")
.font(.caption)
}
}
}
![スクリーンショット 2024-05-12 21.04.38](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fcb55ec22-7067-8409-ca04-825b7be8df47.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0830e17d5126133e8052c6c90f156382)
グラフをインタラクティブに扱う
.chartXSelection(value:)
.chartXSelection(value:)を利用することでX軸上のグラフの値を取得し、Bindingすることができる。
全てのジェスチャを認識して処理してくれる。
(iOS17 +)
![Simulator Screenshot - iPhone 15 Pro - 2024-05-26 at 01.58.25](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F2f18e68d-27c8-4b25-8196-d90185c73c70.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=192f6cc4e6c4d7e2d6cfb0a41a04c698)
// 利益
struct ProfitOverTime {
var date: Date
var profit: Double
}
// 利益データ
var data: [ProfitOverTime] {
[
ProfitOverTime(date: date(2024, 1, 1), profit: 100),
ProfitOverTime(date: date(2024, 2, 1), profit: 280),
ProfitOverTime(date: date(2024, 3, 1), profit: 200),
ProfitOverTime(date: date(2024, 4, 1), profit: 380),
ProfitOverTime(date: date(2024, 5, 1), profit: 400),
ProfitOverTime(date: date(2024, 6, 1), profit: 370),
ProfitOverTime(date: date(2024, 7, 1), profit: 430),
ProfitOverTime(date: date(2024, 8, 1), profit: 500),
ProfitOverTime(date: date(2024, 9, 1), profit: 530),
ProfitOverTime(date: date(2024, 10, 1), profit: 400),
ProfitOverTime(date: date(2024, 11, 1), profit: 370),
ProfitOverTime(date: date(2024, 12, 1), profit: 470),
]
}
@State var rawSelectedDate: Date?
var selectedDate: Date? {
// グラフから受け取った生の値(rawSelectedDate)と、dataの配列の各日付の時間差を比較し、最も近い日付を返す
guard let rawDate = rawSelectedDate else { return nil }
let closest = data.min(by: { abs($0.date.timeIntervalSince(rawDate)) < abs($1.date.timeIntervalSince(rawDate)) })
return closest?.date
}
public var body: some View {
VStack {
Chart(data, id: \.date) {
LineMark(
x: .value("Date", $0.date, unit: .month),
y: .value("Profit", $0.profit)
)
.interpolationMethod(.catmullRom)
.symbol(by: .value("departmentName", "A"))
if let selectedDate {
// 選択した時にRuleMarkを追加
RuleMark(
x: .value("Selected", selectedDate, unit: .month)
)
.foregroundStyle(.gray.opacity(0.3))
.offset(yStart: -10)
.zIndex(-1)// RuleMarkがLineMarkの後ろに来るように。defaultは0
.annotation( // 注釈の作成
position: .top, //
spacing: 0,
overflowResolution: .init(
x: .fit(to: .chart), // X軸では注釈がグラフの端の境界を超えないようにfitさせる
y: .disabled // Y軸では注釈がグラフのすぐ上に来るようにするようにオーバーフロー解決を無効にする
)
) {
Text(selectedDate, format: Date.FormatStyle(date: .numeric, time: .none))
.padding()
.background(Color.red)
}
}
}
.chartXSelection(value: $rawSelectedDate) // タップした位置のX軸上の値を取得
.frame(height: 300)
.padding()
}
}
.chartXSelection(range:)
.chartXSelection(range:)を利用することで2本指でタップしている範囲を取得することも可能
(iOS17 +)
![IMG_3359.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F1827ce9c-d8fc-d8d8-2117-9ed3ae9318ca.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=660768f608ff26d1080060b2f81fea0c)
@State var rawSelectedRange: ClosedRange<Date>?
...
Chart {
LineMark(...)
...
if let rawSelectedRange { // 2本指で選択した範囲を描画する
RectangleMark(
xStart: .value("Index", rawSelectedRange.lowerBound),
xEnd: .value("Index", rawSelectedRange.upperBound)
)
.foregroundStyle(.blue.opacity(0.03 ))
}
.chartXSelection(range: $rawSelectedRange) // 2本指でタップした時のrangeも取れる
...
カスタムジェスチャを利用する
chartGesture
を用いることで、独自のジェスチャに対して選択位置をグラフに通知することができる。
以下の例ではDragGestureを用いてドラッグの開始値と現在値の値を選択状態としてprxyに通知している
![Simulator Screenshot - iPhone 15 Pro - 2024-05-26 at 14.28.18](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F0c9051ea-09f7-93ee-117a-f7dd79c7acbf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=056bb060b2270ffa67ea027672f2866d)
@State private var selectedDay: ClosedRange<Int>?
...
Chart {
LineMark(
x: .value("Day", data.day),
y: .value("Sales", data.sales)
)
if let selectedDay {
RectangleMark(
xStart: .value("value", selectedDay.lowerBound),
xEnd: .value("a", selectedDay.upperBound)
)
}
}
.chartXScale(domain: 1...7)
.chartXSelection(range: $selectedDay)
.chartGesture { proxy in
DragGesture(minimumDistance: 0)
.onChanged { value in
// ドラッグの開始値と現在値を選択させる
proxy.selectXRange(from: value.startLocation.x, to: value.predictedEndLocation.x)
// 範囲ではなくタップしている位置のみを選択する場合
// proxy.selectXValue(at: value.location.x)
}
.onEnded { _ in
selectedDay = nil
}
}
.chartAngleSelection(value:)
SectorMarkでは.chartAngleSelection(value:)を利用する
![Simulator Screenshot - iPhone 15 Pro - 2024-05-26 at 02.23.02](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2Fdc7a91ef-5883-56bb-0b7c-c623466c758b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cd9f79ba41f0b3f9a4025e8a34b82e72)
struct Food: Identifiable{
let name: String
let sales: Int
var id: String { name }
}
let data: [Food] = [
.init(name: "Cachapa", sales: 9631),
.init(name: "Crepe", sales: 6959),
.init(name: "Injera", sales: 4891),
.init(name: "Jian Bing", sales: 2506),
.init(name: "American", sales: 1777),
.init(name: "Dosa", sales: 625),
]
@State var selectedAngle: Int?
var selectedName: String? {
guard let selectedAngle else { return nil }
// 売上の大きい順に並び替え
let sortedData = data.sorted { $0.sales > $1.sales }
// 売上を累積してselectedAngleを超えたらその名前を返す
var accumulatedSales = 0
for food in sortedData {
accumulatedSales += food.sales
if selectedAngle < accumulatedSales {
return food.name
}
}
return nil
}
var body: some View {
VStack {
Chart(data) {
SectorMark(
angle: .value("Value", $0.sales),
innerRadius: .ratio(0.6),
angularInset: 1
)
.foregroundStyle(by: .value("Food Category", $0.name))
.opacity($0.name == selectedName ? 1.0 : 0.3)
}
.chartAngleSelection(value: $selectedAngle) // タップした位置のAngleを取得
.frame(height: 300)
}
.padding()
.chartBackground { chartProxy in
GeometryReader { geometry in
let frame = geometry[chartProxy.plotAreaFrame]
VStack {
Text("Tapped Food")
.font(.callout)
.foregroundStyle(.secondary)
Text(selectedName ?? "nil")
.font(.title2.bold())
.foregroundStyle(.primary)
}
.position(x: frame.midX, y: frame.midY)
}
}
}
iOS16の場合
グラフをインタラクティブに扱うには、iOS17では.chartXSelection(value:)
が利用できるが、iOS16の場合は.chartOverlay(alignment:content:)
を利用する必要がある。
.chartOverlay(alignment:content:)
を利用することで、グラフの前面にDragGesture()などを付与したRectangleを配置し、インタラクティブに扱うことが可能となる。
また、.chartOverlay(alignment:content:)
ではグラフのplotAreaにアクセスするためのProxyを得ることができる。
このProxyを使ってデータ値をスクリーン座標に変換したり、その逆に変換したりできる。
以下はドラッグジェスチャーによってスクリーン座標をデータ値に変換する例。
ドラッグした部分のpriceの値を出力している
struct SalesData: Identifiable {
let id = UUID()
let year: String
let price: Int
}
struct ContentView: View {
let data: [SalesData] = [
SalesData(year: "2020", price: 200),
SalesData(year: "2021", price: 400),
SalesData(year: "2022", price: 600),
SalesData(year: "2023", price: 800)
]
var body: some View {
Chart(data) {
LineMark(
x: .value("year", $0.year),
y: .value("price", $0.price)
)
}
.chartOverlay { proxy in // proxyを取得
GeometryReader { geometry in // 座標を取得
// ドラッグジェスチャーに適応するように構成された透明な長方形のView
Rectangle().fill(.clear).contentShape(Rectangle())
.gesture(
DragGesture()
.onChanged { value in
// ジェスチャーの位置をPlotAreaの座標空間に変換
let origin = geometry[proxy.plotFrame!].origin
let location = CGPoint(
x: value.location.x - origin.x,
y: value.location.y - origin.y
)
// 座標からyearとpriceの値を取得する
if let (date, price) = proxy.value(at: location, as: (String, Int).self) {
print("Location: \(date), \(price)")
}
}
)
}
}
}
}
以下はドラッグの開始位置から終了位置までの値を出力する例
![Simulator Screenshot - iPhone 15 Pro - 2024-05-12 at 19.27.08](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F237700%2F24817d3e-f5ba-f6c0-09ee-7dc131fb28f1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=93694f56671312cb25510628d216b4ee)
// 利益
struct ProfitOverTime {
var date: Date
var profit: Double
}
// 利益データ
var data: [ProfitOverTime] {
[
ProfitOverTime(date: date(2024, 1, 1), profit: 100),
ProfitOverTime(date: date(2024, 2, 1), profit: 280),
ProfitOverTime(date: date(2024, 3, 1), profit: 200),
ProfitOverTime(date: date(2024, 4, 1), profit: 380),
ProfitOverTime(date: date(2024, 5, 1), profit: 400),
ProfitOverTime(date: date(2024, 6, 1), profit: 370),
ProfitOverTime(date: date(2024, 7, 1), profit: 430),
ProfitOverTime(date: date(2024, 8, 1), profit: 500),
ProfitOverTime(date: date(2024, 9, 1), profit: 530),
ProfitOverTime(date: date(2024, 10, 1), profit: 400),
ProfitOverTime(date: date(2024, 11, 1), profit: 370),
ProfitOverTime(date: date(2024, 12, 1), profit: 470),
]
}
@State var range: (Date, Date)? = nil
public var body: some View {
VStack {
Chart(data, id: \.date) {
LineMark(
x: .value("Date", $0.date, unit: .month),
y: .value("Profit", $0.profit)
)
.interpolationMethod(.catmullRom)
.symbol(by: .value("departmentName", "A"))
if let range = range {
RectangleMark(
xStart: .value("Range Start", range.0),
xEnd: .value("Range End", range.1)
)
.foregroundStyle(.gray.opacity(0.03))
}
}
.chartOverlay { proxy in
GeometryReader { geometry in // 座標を取得
// ドラッグジェスチャーに適応するように構成された長方形のView
Rectangle().fill(.clear).contentShape(Rectangle())
.gesture(
DragGesture()
.onChanged { value in
// plotAreaでドラッグの開始位置と現在の位置のX座標を見つける
let startX = value.startLocation.x - geometry[proxy.plotAreaFrame].origin.x
let currentX = value.location.x - geometry[proxy.plotAreaFrame].origin.x
// 開始と現在のX座標の日付の値を見つける
if let startDate: Date = proxy.value(atX: startX),
let currentDate: Date = proxy.value(atX: currentX) {
// 日付のrangeを渡す
range = (startDate, currentDate)
}
}
.onEnded{ _ in
range = nil // gestureが終わったらrangeをnilにする
}
)
}
}
.frame(height: 300)
ForEach(data, id: \.date) { value in
if let range = range, value.date > range.0, value.date < range.1 {
Text(value.date, format: .dateTime)
}
}
}
.frame(maxHeight: .infinity, alignment: .top)
}
グラフをスクロール可能にする
指定した方向にスクロール可能にする
Chart {
BarMark(...)
}
.chartScrollableAxes(.horizontal) // スクロールを可能にする
スクロール可能なグラフに表示する範囲を指定する
Chart {
BarMark(...)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 10) // 表示範囲を10までにする(X軸が1,2,3,4...となっている場合)
//.chartXVisibleDomain(length: 3600 * 6) // 表示範囲を6時間分にする(X軸が時間の場合)
スクロールの位置をbindingさせる
@State var scrollPosition: Date = Date() // 現在時刻
...
Chart {
BarMark(...)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 6)
.chartScrollPosition(x: $scrollPosition) // X軸の現在時刻の値までスクロールさせた状態にする
スクロールする位置を調整
chartScrollTargetBehavior
を用いることでスクロール終了時の位置を指定することができる。
以下の例ではスクロール終了時に最も近いX軸のデータのいずれかの位置に調整される
struct SalesData: Identifiable {
let id = UUID()
let day: Int
let sales: Int
}
let salesData: [SalesData] = [
SalesData(day: 1, sales: 100),
SalesData(day: 2, sales: 150),
SalesData(day: 3, sales: 200),
SalesData(day: 4, sales: 250),
SalesData(day: 5, sales: 300),
SalesData(day: 6, sales: 350),
SalesData(day: 7, sales: 400),
SalesData(day: 8, sales: 450),
SalesData(day: 9, sales: 500),
SalesData(day: 10, sales: 550),
SalesData(day: 11, sales: 600),
SalesData(day: 12, sales: 650)
]
var body: some View {
Chart(salesData) { data in
LineMark(
x: .value("Day", data.day),
y: .value("Sales", data.sales)
)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3)
.chartScrollTargetBehavior(.valueAligned(unit: 1)) // スクロール終了時にX軸のデータの位置になるように調整する
.frame(height: 300)
.padding()
}
Chartのデザイン
WWDC22の以下2つはグラフのデザインについてのセッションで実装する際の参考になる。両方ともコードは一切出てこないので非エンジニアでも見れそう。
おわりに
多分Chartsについてまとめてる記事の中で一番細かいところまで書いてるんじゃないかなと思います。
冒頭でも触れたようにドキュメントの内容全てを網羅してるわけでもないので(現時点で8割ほど)、随時更新します。
また、間違いなどもあると思うのでコメントいただけると助かります。
参考資料
WWDC22
- Hello Swift Charts
- Swift Charts: Raise the bar
- Design an effective chart
- Design app experiences with charts
WWDC23