【SwiftUI】Chartsを使って線グラフを表示する

はじめに

今回はSWiftUIを使って線グラフを表示していきたいと思います。（厳密にはSWiftUIでUIViewを使います）
使用するライブラリはChartsです。

1. 作った物

本記事のコードを用いることでこのようなグラフを表示することができます。

2.ライブラリをインポート

CocoaPodからライブラリを導入します。
まずはプロジェクトディレクトリでpod init

続いてPodfileにpod 'Charts'を追記してpod install

あとはプロジェクト内でimport Chartsとすれば使えるようになります。

3.SwiftUIでUIViewを使う

Chartsライブラリですが、SwiftUIには対応しておらず、従来のUIKitのライブラリとなります。

そのため使うためにはSwiftUIでラップする必要があります。

SwiftUIしか触ったことがない私はこの時点で？？？でしたが、
調べてみて何となくわかってきました。

UIViewRepresentableプロトコル

UIKitのクラスをラップするにはUIViewRepresentableプロトコルを使用します。

ラッパークラス（構造体？）のLineChartを作成します。(ここの名前は自由です）
そしてLineChartViewというのが今回ラップ対象のクラスです。

struct LineChart : UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
       // ここでViewが作られるイメージ
    }

    func updateUIView(_ uiView: LineChartView, context: Context) {
       // 値が更新された時に呼び出される処理
    }

}

また、UIViewRepresentableプロトコルはmakeUIView関数とupdateUIView関数の実装が必須になります。

makeUIViewで表示するViewが作られるイメージ
updateUIViewでは値が更新された時に呼び出される処理を書きます。例えば数値を追加した時にそれを動的にグラフに反映する時に使用します。今回はそこまで実装しません。

実装

こちらが全文となります。makeUIViewの箇所がメインとなります。
dataSetをdataにいれてdataをチャートに反映する。
というだけですのでそこまで複雑な内容ではありません。

import SwiftUI
import Charts

struct LineChart : UIViewRepresentable {
    func updateUIView(_ uiView: LineChartView, context: Context) {
        // update
    }

    func makeUIView(context: Context) -> LineChartView {
        // グラフに表示する要素
        let lineChartEntry : [ChartDataEntry] = [
            ChartDataEntry(x: 0, y: 0),
            ChartDataEntry(x: 1, y: 1),
            ChartDataEntry(x: 2, y: 2),
            ChartDataEntry(x: 3, y: 3),
            ChartDataEntry(x: 4, y: 4),
            ChartDataEntry(x: 5, y: 5),
        ]

        let chart = LineChartView()
        let data = LineChartData()
        let dataSet = LineChartDataSet(entries: lineChartEntry)

        // データセットを作ってチャートに反映
        data.addDataSet(dataSet)
        chart.data = data

        return chart
    }
}

struct ContentView: View {
    var body: some View {
        LineChart()
    }
}

おわりに

無事SwiftUIでChartsを使うことができました！
次回は値を動的にグラフに反映する方法やグラフの見た目をカスタマイズする方法を投稿したいと思います。