search
LoginSignup
5

posted at

updated at

WWDC22 で発表された Swift Charts (Beta) を早速使ってみる - 棒グラフ・線グラフ・点グラフ -

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

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

環境

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(棒グラフ) image.png
LineMark(線グラフ) image.png
PointMark(点グラフ、散布図) image.png
AreaMark(面グラフ) image.png
RectangleMark(四角形を使ってデータを表す。) image.png
RuleMark(直線を使ってデータを表す) image.png

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

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

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

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

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

がんばる。

棒グラフを作る

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

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

image.png

image.png

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

チュートリアルではtypeType型ではなく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の中では興味のあるフレームワークだったので、とてもワクワクしました :heart:
Beta版なので、正式版でどこまで変わってくるものなのかわかりませんが、そこまで変わらないものなんでしょうか? :thinking:

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5