iOS16で追加されたChartsフレームワークで日々の売上データをグラフ化してみる

iOS16の新機能に触れてみよう 第4回

　本連載では、SwiftUIの基本的なプログラムができる読者を対象に、SwiftUIの新しい機能の基本的な事柄を解説します。iOS16で追加された機能やSwiftUI 4で実装された新しい機能の使い方を、サンプルを作成しながら説明します。

はじめに

　対象読者をSwiftUIの基本的な事柄が分かる方としている関係上、SwiftUIの仕様やXcodeの使い方については解説を割愛する場合があることをご了承ください。同様にSwift自体の説明も必ずしも十分でない場合があります。そのような場合は末尾の参考文献などを参照してください。

対象読者

　本記事は、次の方を対象にしています。

• SwiftUIの基本的なプログラムができる方
• Xcodeを使える方

iOS16とSwiftUI 4

　WWDC 22で発表されたiOS16の公開に伴って、SwiftUIのバージョンアップも発表されました。SwiftUIの4回目のバージョンアップという意味で、iOS16以降のSwiftUIはSwiftUI 4.0または単にSwiftUI 4と呼ばれています。iOS16は2022年9月13日に公開されました。

今回扱うSwiftUI 4の範囲

　iOS16で追加されたSwift Chartsフレームワークの具体的な使い方について紹介します。Swift Chartsフレームワークについては、本連載第1回でも紹介していますので、Swift Chartsフレームワーク自体についてはそちらの記事でご確認ください。また本記事の趣旨は、iOS16/SwiftUI 4で利用できる新機能の紹介です。機能別にクラスやメソッドなどの詳細な説明は割愛することもありますので、その点を了承した上で読み進めてください。

サンプルデータを用意する

　Chartsフレームワークの利用例として、日々の売り上げデータをグラフ化してみます。日々の売り上げデータを表す構造体を DailyAmountの名前で次のように定義します。

［リスト1］ChartsSample/Models.swift抜粋

struct DailyAmount: Identifiable {
    var id = UUID()            // ユニークなIDを生成
    var date: Date             // 日付
    var amount: Double    // 売り上げ
}

var examples: [DailyAmount] { // 2023年1月分のデータを生成
    get {
        let calendar = Calendar(identifier: .gregorian)
        return Array(1...31).map({ calendar.date(from: DateComponents(year: 20223, month: 1, day: $0))! })
        .map({ DailyAmount(date: $0, amount: .random(in: 1500...10000)) })
    }
}

　Chartsで表示する構造体は、グラフ上の各点を区別するためにidプロパティを備えるIdentifiableプロトコルを実装することを忘れないようにしてください。

　サンプルデータとして2023年1月分のデータをランダムに生成して利用します。ランダムに生成したサンプルデータを利用するため、サンプルの実行結果は必ずしも本記事のキャプチャと同じにならないことをご了承ください。