2024/11/23

【Swift UI/Charts】ガントチャートの実装方法！帯グラフ

この記事からわかること

Swift UIで使えるSwift Chartsフレームワークの使い方
ガントチャートの実装方法

index

[open]

ガントチャートの実装方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：16.0
iOS：18.0
Swift：5.9
macOS：Sonoma 14.6.1

ガントチャートの実装方法

プロジェクトやタスクのスケジュール管理によく使用されるガントチャートを実装したくて色々試しているとSwift UIのChartsフレームワークを使用することで簡単に実装することができました。

まずガントチャートに表示するための元データを定義しておきます。肝となるのは開始日と終了日の2つですね。

let sampleData: [Event] = [
    Event(name: "Task A", startDate: Date().addingTimeInterval(-86400 * 3), endDate: Date().addingTimeInterval(-86400)),
    Event(name: "Task B", startDate: Date().addingTimeInterval(-86400 * 2), endDate: Date()),
    Event(name: "Task C", startDate: Date(), endDate: Date().addingTimeInterval(86400 * 3))
]

struct Event: Identifiable {
    let id = UUID()
    let name: String
    let startDate: Date
    let endDate: Date
}

ChartsではBarMark(xStart:, xEnd: , y:)を使用することでガントチャートが簡単に実装することができます。xStartに開始日をxEndに終了日を渡すことでその間の部分のみに横の帯グラフを表示させることができます。

struct GanttChartView: View {
    let events: [Event]
    
    var body: some View {
        Chart(events) { event in
            BarMark(
                xStart: .value("Start Date", event.startDate),
                xEnd: .value("End Date", event.endDate),
                y: .value("Event", event.name)
            ).foregroundStyle(by: .value("Event", event.name))
        }.chartXAxis {
            AxisMarks(values: .stride(by: .day))
        }.chartYAxis {
            AxisMarks()
        }.frame(height: 300)
            .padding()
    }
}