SwiftUI+Chart

Chart がきた

iOS には今まで標準ライブラリでチャートを表示させる方法がなく、外部ライブラリに依存しっぱなしだったのですがとうとう Swift にもチャートライブラリが実装されました。

正直、機能としてはまだまだ足りないところがあるのですが標準機能として実装されるのはありがたいですね。

今回はCreating a chart using Swift Chartsを読みながら、SwiftUI でチャートを実装させるための方法を学んでいこうと思います。

チャートの種類

チャートにはMarkと呼ばれるコンポーネントがあり、これでチャートを表現します。

AreaMark
LineMark
PointMark
RectangleMark
RuleMark
BarMark

実装されているのは上の六種類で、PieMark や DoughnutMark や RadarMark のようなものは存在しません。あればよかったんですけどね、残念です。

で、それぞれどんな実装が可能なのかを見ていきます。サンプルの画像は Apple のドキュメントから引っ張ってきました。

AreaMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    y: PlottableValue<Y>,
4
    stacking: MarkStackingMethod = .standard
5
) where X : Plottable, Y : Plottable

株価とかに使えそうなやつですね。

これも積み重ねることができます。

積み重ね方を変えるとこういう表現も可能という例。

LineMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    y: PlottableValue<Y>
4
) where X : Plottable, Y : Plottable

標準的なラインチャートって感じがします。

線を増やすこともできます。

PointMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    y: PlottableValue<Y>
4
) where X : Plottable, Y : Plottable

散布図とかに使えるやつです。

RectangleMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    yStart: PlottableValue<Y>,
4
    yEnd: PlottableValue<Y>,
5
    width: MarkDimension = .automatic
6
) where X : Plottable, Y : Plottable

使い所がよくわからないグラフの一つ。

RuleMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    yStart: PlottableValue<Y>,
4
    yEnd: PlottableValue<Y>
5
) where X : Plottable, Y : Plottable

これもいまいち使い所がわかっていないです。幅をもたせたいときに使う感じでしょうか。

BarMark

1
init<X, Y>(
2
    x: PlottableValue<X>,
3
    yStart: PlottableValue<Y>,
4
    yEnd: PlottableValue<Y>,
5
    width: MarkDimension = .automatic
6
) where X : Plottable, Y : Plottable

標準的なバーチャートです。使い所は多いはず。サンプルはこの向きですが、X 軸と Y 軸の反転や積み重ねなどもできます。

PlottableValue

で、チャートを表現するために必要なのがこのPlottableValueという謎の構造体。

1
struct PlottableValue<Value> where Value: Plottable {
2
}

定義を見てみるとこんな感じで、要はPlottableに適合すれば良いらしいので、Plottableを調べると、

You can plot Plottable data values with marks with .value(label, keyPath):

とでてきます。なんでこんなややこしいことになっているのかとも思ったのですが、よくよく考えれば理にかなっている気もします。

例えばラインチャートを使って以下の画像のようなものを表示させることを考えます。

このときに必要なのはxの値をyの値を持つ構造体の配列です。なので以下のようなコードを使ってEntryを定義して、その配列を渡せばチャートの表示に必要なデータとしては十分なわけです。

1
struct Entry<T: BinaryFloatingPoint> {
2
  let x: T
3
  let y: T
4
}
5

6
let entries: [Entry] = []
7

8
var body: some View {
9
    Chart(entries, content: {
10
        LineMark(
11
            x: .value(x)),
12
            y: .value(y))
13
        )
14
    })
15
}

あれ、じゃあデータが一つ増えて二本の線を引くことになったらどうすればいいんだとなりますね。

バカ正直に考えるとentriesを二次元配列にして、二回描画するとかなるわけですがそれだと無駄にコードが複雑化してしまいます。

じゃあどうするのかというとentries自体は弄らずに、線を区別するための情報をEntryにもたせます。例として、以下のコードではtypeで区別するようにしました。

1
struct Entry<T: BinaryFloatingPoint> {
2
  let x: T
3
  let y: T
4
  let type: Int
5
}
6

7
let entries: [Entry] = []
8

9
var body: some View {
10
    Chart(entries, content: { entry in
11
        LineMark(
12
            x: .value(entry.x)),
13
            y: .value(entry.y))
14
        )
15
        .foregroundStyle(by: .value(entry.type))
16
    })
17
}

foregroundStyleというのはまあ簡単に言えばカテゴリ分類みたいな感じです。上のコードでは簡略化のためにラベルを省略していますが、本来のPlottableはラベルと値を組み合わせたプロトコルなので、ラベルのデータも必要になります。

とはいえ、使う場面があまりないのでなくてもいいのかもしれません。いや、多分要るけど理解ができてなさすぎて使う場面がわからないだけなんですけれど。