はじめに
この記事は前回の記事から続いています。
前回は株価をタップ&ドラッグした時のアクションを追加しました。
今回はタップした時の上の株価を表示させる&タップしている株価の位置にsymbolを置くの2つをやってみます。
実際の株価アプリ
作成したサンプルアプリ
準備
前前回のDate拡張と同様
モデルの用意
前前回のモデルと同様
実装
struct ContentView: View {
// 土日祝日により欠損していたデータをほn
@State private var stocks: [Stock] = [
.init(date: .init(year: 2023, month: 10, day: 2), value: 2130),
.init(date: .init(year: 2023, month: 10, day: 3), value: 4160),
.init(date: .init(year: 2023, month: 10, day: 4), value: 4308),
.init(date: .init(year: 2023, month: 10, day: 5), value: 5220),
.init(date: .init(year: 2023, month: 10, day: 6), value: 6311),
+ .init(date: .init(year: 2023, month: 10, day: 7), value: 6311),
+ .init(date: .init(year: 2023, month: 10, day: 8), value: 6311),
+ .init(date: .init(year: 2023, month: 10, day: 9), value: 6311),
.init(date: .init(year: 2023, month: 10, day: 10), value: 6311),
.init(date: .init(year: 2023, month: 10, day: 11), value: 5809),
.init(date: .init(year: 2023, month: 10, day: 12), value: 5350),
.init(date: .init(year: 2023, month: 10, day: 13), value: 5196),
+ .init(date: .init(year: 2023, month: 10, day: 14), value: 5196),
+ .init(date: .init(year: 2023, month: 10, day: 15), value: 5196),
.init(date: .init(year: 2023, month: 10, day: 16), value: 5200),
.init(date: .init(year: 2023, month: 10, day: 17), value: 6123),
.init(date: .init(year: 2023, month: 10, day: 18), value: 6110),
.init(date: .init(year: 2023, month: 10, day: 19), value: 6092),
.init(date: .init(year: 2023, month: 10, day: 20), value: 6501),
+ .init(date: .init(year: 2023, month: 10, day: 21), value: 6501),
+ .init(date: .init(year: 2023, month: 10, day: 22), value: 6501),
.init(date: .init(year: 2023, month: 10, day: 23), value: 6867),
.init(date: .init(year: 2023, month: 10, day: 24), value: 7381),
.init(date: .init(year: 2023, month: 10, day: 25), value: 7980),
.init(date: .init(year: 2023, month: 10, day: 26), value: 9016),
.init(date: .init(year: 2023, month: 10, day: 27), value: 8221),
+ .init(date: .init(year: 2023, month: 10, day: 28), value: 8221),
+ .init(date: .init(year: 2023, month: 10, day: 29), value: 8221),
.init(date: .init(year: 2023, month: 10, day: 30), value: 7217),
.init(date: .init(year: 2023, month: 10, day: 31), value: 6221),
]
// 選択している日付
@State private var selectedDate: Date?
+ // 選択している株価
+ @State private var selectedStockValue: Int?
// チャートの色
private var chartColor: Color {
selectedDate != nil ? .cyan : .green
}
var body: some View {
Chart {
ForEach(stocks, id: \.id) { stock in
AreaMark(
x: .value("日時", stock.date, unit: .day, calendar: .autoupdatingCurrent),
y: .value("株価", stock.value)
)
.foregroundStyle(.linearGradient(
.init(colors: [chartColor.opacity(0.3), chartColor.opacity(0.1)]),
startPoint: .top,
endPoint: .bottom
))
LineMark(
x: .value("日時", stock.date, unit: .day, calendar: .autoupdatingCurrent),
y: .value("株価", stock.value)
)
.foregroundStyle(chartColor)
if let selectedDate {
// 日付を選択した時に出てくる縦線
RuleMark(
x: .value("日時", selectedDate)
)
.foregroundStyle(chartColor)
+ .annotation(position: .top) {
+ // 選択している日付の株価を上に表示する
+ Text(selectedStockValue?.description ?? "???")
+ .font(.system(size: 13))
+ .foregroundStyle(chartColor)
+ }
}
+ if let selectedDate, let selectedStockValue {
+ // 折れ線グラフと縦線が重なっているところに表示されている丸
+ PointMark(
+ x: .value("日時", selectedDate),
+ y: .value("株価", selectedStockValue)
+ )
+ .symbol {
+ Circle()
+ .fill()
+ .frame(width: 20, height: 20)
+ .foregroundStyle(chartColor)
+ .shadow(radius: 1)
+ }
+ }
}
}
.frame(height: 250)
+ // チャートのX軸の範囲
+ .chartXScale(domain: Date(year: 2023, month: 10, day: 2) ... Date(year: 2023, month: 10, day: 31))
+ // チャートのY軸の範囲
+ .chartYScale(domain: 0 ... 10000)
.chartXSelection(value: $selectedDate)
.chartGesture { chart in
DragGesture(minimumDistance: 0)
.onChanged {
// ドラッグしている座標をチャートに知らせる
chart.selectXValue(at: $0.location.x)
}
.onEnded { _ in
// 指を離した時にリセット
selectedDate = nil
+ selectedStockValue = nil
}
}
+ .onChange(of: selectedDate) {
+ // nilの場合は無視する
+ guard let selectedDate else { return }
+ // stocksの中で一致する日付を探す
+ selectedStockValue = stocks.first(where: {
+ selectedDate.formatted(.iso8601.year().month().day())
+ == $0.date.formatted(.iso8601.year().month().day())
+ })?.value
+ }
.preferredColorScheme(.dark)
}
}
解説
選択中の日付の株価を格納する変数を作成します。
@State private var selectedStockValue: Int?
選択中の日付の株価にPointMarkを配置します。
symbolを使うことによって配置するViewを変更することができます。
今回でいうと、この丸いやつです。
if let selectedDate, let selectedStockValue {
// 折れ線グラフと縦線が重なっているところに表示されている丸
PointMark(
x: .value("日時", selectedDate),
y: .value("株価", selectedStockValue)
)
.symbol {
Circle()
.fill()
.frame(width: 20, height: 20)
.foregroundStyle(chartColor)
.shadow(radius: 1)
}
}
選択中の株価をチャートの上に表示しています。
RuleMark( /* */ ) {
//
}
.annotation(position: .top) {
// 選択している日付の株価を上に表示する
Text(selectedStockValue?.description ?? "???")
.font(.system(size: 13))
.foregroundStyle(chartColor)
}
チャートのX軸とY軸の表示範囲を指定しています。
今回だとX軸は2023年10月2日~2023年10月31日に、
Y軸は0~10000に設定されています。
Chart {
//
}
// チャートのX軸の範囲
.chartXScale(domain: Date(year: 2023, month: 10, day: 2) ... Date(year: 2023, month: 10, day: 31))
// チャートのY軸の範囲
.chartYScale(domain: 0 ... 10000)
selectedDateからselectedStockValueを検索しています。
.onChange(of: selectedDate) {
// nilの場合は無視する
guard let selectedDate else { return }
// stocksの中で一致する日付を探す
selectedStockValue = stocks.first(where: {
selectedDate.formatted(.iso8601.year().month().day())
== $0.date.formatted(.iso8601.year().month().day())
})?.value
}
おわり
だいぶ、本物に近づいてきましたね