先週のWWDC22で発表された新しいフレームワーク、Swift Charts (Beta)を使ってみました！

チュートリアルを読み進めつつ、思ったことを書いていこうと思います。

環境

Swift Charts 含め、macOS や Xcode、iOS もまだ Beta になります。

macOS 13 beta 13.0
Xcode 14.0 beta
iOS 16.0 beta

Swift Charts とは

「データを有益にビジュアライズするための、強力で簡潔なSwiftUIフレームワーク」
とのことです。

使用できるMarkの構造体はBetaの時点では、大きく6種類あるようです。
今回はそのうち、最初の3つのチュートリアルをやってみました。

種類	図（Apple Developer Documentationより）
BarMark（棒グラフ）
LineMark（線グラフ）
PointMark（点グラフ、散布図）
AreaMark（面グラフ）
RectangleMark（四角形を使ってデータを表す。）
RuleMark（直線を使ってデータを表す）

ローカライゼーションとアクセシビリティもサポートしているとのこと。

あと個人的には、「チャートにアニメーションを追加することもできる」というのがとても気になりますね

実際にチャートを作ってみる

ここからは「Creating a chart using Swift Charts」の内容と、

プラスアルファで折れ線グラフと散布図もやってみます！

がんばる。

棒グラフを作る

ここはチュートリアル通りです。

まず前提ですが、
カラフルでそれぞれ形状の違うおもちゃがあります。これを Swift Charts を使用して、色や形状ごとのチャートを作っていこうというものになります。

まずはチャートにするためのデータの作成です。
今回はチュートリアルなので、アプリ内で固定データを作成するようになっていますが、実際はネットワーク接続して取得してきたデータをダウンロードしたり、ファイルから読み込んできたデータを使うだろう、とのことです。

チュートリアルではtypeはType型ではなくStringなのですが、好みでこうしてみただけです。

ToyShape

struct ToyShape: Identifiable {
    var type: `Type`
    var count: Double
    var id = UUID()

    enum `Type`: String {
        case cube = "四角形"
        case sphere = "球体"
        case pyramid = "ピラミッド"
    }
}

では早速、チュートリアル通り、棒グラフを作ってみます。

BarChartView

Chart {
  ForEach(data) { shape in
      BarMark(
        x: .value("形状", shape.type),
        y: .value("総数", shape.count)
      )
    }
}

わーい！もうこれだけでなんだか嬉しいですねw

次は、おもちゃにはそれぞれ異なる色が付いているので、それを棒グラフで表現します。

先ほど作った構造体にcolorを追加。

ToyShape

struct ToyShape: Identifiable {
    var color: Color
    var type: `Type`
    var count: Double
    var id = UUID()

    // 省略

    // 追加
    enum Color: String {
        case green = "緑"
        case purple = "紫"
        case pink = "ピンク"
        case yellow = "黄色"
    }
}

肝心のContentView.swiftですが、foregroundStyleモディファイアを追加するだけで、色のデータを反映することができるそうです。

でもこれだと実際のおもちゃの色と、チャートの色が合っていません。chartForegroundStyleScaleモディファイアを使ってこれを指定することができるそうです。

ContentView

Chart {
   ForEach(data) { shape in
       BarMark(
           x: .value("形状", shape.type.rawValue),
           y: .value("総数", shape.count)
       )
       .foregroundStyle(by: .value("形状", shape.color.rawValue))
   }
}
.chartForegroundStyleScale([
    ToyShape.Color.green.rawValue: .green,
    ToyShape.Color.purple.rawValue: .purple,
    ToyShape.Color.pink.rawValue: .pink,
    ToyShape.Color.yellow.rawValue: .yellow,
])

こんな感じになります。

折れ線グラフを作る

ここで終わるとチュートリアルやっただけになるので、折れ線グラフも挑戦してみます。

チュートリアルではデータは、月間日照時間が使われていましたが、
私の好みで普段書いてるnote記事のビュー数の推移をグラフにしようと思います。

期間	View数
1/13-2/12	960
2/13-3/12	1,162
3/13-4/12	2,096
4/13-5/12	1,875

構造体を作ります。

NoteStatics

struct NoteStatics: Identifiable {
    var term: String
    var numOfViews: Int
    var id = UUID()
}

そしてチャートですが、折れ線グラフの場合はLineMarkを使用します。

LineChartView

Chart(data) {
    LineMark(
        x: .value("期間（月）", $0.term),
        y: .value("ビュー数", $0.numOfLikes)
    )
}

これでこんなグラフが完成しました。
※途中からセグメントコントロールを実装したので、棒グラフの時と見た目が多少変わっています

点グラフ（散布図）

最後に、点グラフを作ってみます。
何か自分の身の回りのデータを持ってきたかったのですが、すぐ思いつかなかったので、ドキュメントのをそのまま拝借・・・

ドキュメントでは、昆虫の羽の数と羽の横幅を図にプロットしているようです。

まずデータの構造体から。

Insect

struct Insect: Identifiable {
    let name: String
    let family: String
    let wingLength: Double
    let wingWidth: Double
    let weight: Double
    let id = UUID()
}

次にViewです。

PointChartView

Chart(data) {
    PointMark(
        x: .value("羽の枚数", $0.wingLength),
        y: .value("羽の横幅", $0.wingWidth)
    )
}

ちょっとデータ量が少ないので寂しく見えますが、一応完成しました！

おわりに

コード全体は以下に挙げています。

WWDC22の中では興味のあるフレームワークだったので、とてもワクワクしました
Beta版なので、正式版でどこまで変わってくるものなのかわかりませんが、そこまで変わらないものなんでしょうか？

今回は6種類あるうちのよく使われるであろう、3つを作ってみました。残り3つもどこかでやってみたいです。

参考