【Swift】Chartsで複数の折れ線グラフの書き方

  • 2
    Like
  • 0
    Comment

とりあえずコピペで動かしたい人は下までスクロールしてください

はじめに

iOSでグラフを書く必要が出てきたので,綺麗なグラフが書けるCharts使ってみました.
だいたいissues見ればおkですが,複数の折れ線グラフの書き方は誰も記事にしていなかったと思うので残しておきます.

https://github.com/danielgindi/Charts

Okay so there's this beautiful library called MPAndroidChart by Philipp Jahoda which has become very popular amongst Android developers, and in the meanwhile there's no decent charting solution for iOS.

作者曰く、MPAndroidChartっていうAndroidでグラフ書くときに便利なライブラリのパクリだよ的なことを言っていると思いました
https://github.com/PhilJay/MPAndroidChart

Charts swiftでググってダメならMPAndroidChartでググると先人の偉い人が記事にしてたりしてます.

Chartsで普通の折れ線グラフを書く

普通の何にも凝ってない折れ線グラフを書きます.

実行結果

スクリーンショット 2017-07-18 16.53.05.png

ソースコード

ViewController.swift
import UIKit
import Charts

class ViewController: UIViewController {
    let data:[Double] = [0,1,1,2,3,5,8,13]
    override func viewDidLoad() {
        super.viewDidLoad()
        let rect = CGRect(x:0, y: 30, width: self.view.frame.width, height: self.view.frame.height - 30)
        let chartView = LineChartView(frame: rect)

        var entry = [ChartDataEntry]()

        for (i, d) in data.enumerated() {
            entry.append(ChartDataEntry(x: Double(i), y: d ))
        }

        let dataSet = LineChartDataSet(values: entry, label: "data")

        chartView.data = LineChartData(dataSet: dataSet)

        self.view.addSubview(chartView)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

LineChartを使うときは,ChartDataEntryクラス、LineChartDataSet、
BarChartを使うときは、BarChartDataEntry、BarChartDataSetを使うらしいです.
この辺はグラフのタイプに合わせて使う感じですね

Chartsの複数の折れ線グラフを書くために必要な知識

クラス 役割
ChartView グラフを書く土台
ChartDataEntry 座標を指定する
ChartDataSet 線の色など見た目の設定をする

これらのクラスの関係はLyricalMaestro0さんの記事が一番わかりやすかったです.
MPAndroidChart周りのクラス構成あたりから読んでください...

MPAndroidChartを使って「リアルタイム更新のセンサーデータ時系列グラフ」のサンプルを作ってみた
http://qiita.com/LyricalMaestro0/items/2ec88b4ecb85b18d0468

Chartsで複数の折れ線グラフを書く

実行結果

スクリーンショット 2017-07-18 16.37.44.png

ソースコード

ViewController.swift
import UIKit
import Charts

class ViewController: UIViewController {

    let data:[[Double]] = [[0,1,1,2,3,5,8,13],[13,8,5,3,2,1,1,0]]

    override func viewDidLoad() {
        super.viewDidLoad()

        let rect = CGRect(x:0, y: 30, width: self.view.frame.width, height: self.view.frame.height - 30)

        let chartView = LineChartView(frame: rect)

        var entries = [[ChartDataEntry]]()
        var dataSets = [LineChartDataSet]()

        for i in 0 ..< data.count{
            //空の配列を追加する
            entries.append([ChartDataEntry]())
            for (j, d) in data[i].enumerated() {
                entries[i].append(ChartDataEntry(x: Double(j), y: d ))
            }
            let dataSet = LineChartDataSet(values: entries[i], label: "data\(i)")
            dataSets.append(dataSet)
        }

        //chartView.data = LineChartData(dataSet: dataSet) → LineChartData(dataSets: dataSets as! [IChartDataSet])
        chartView.data = LineChartData(dataSets: dataSets as! [IChartDataSet])

        self.view.addSubview(chartView)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

一つのDataSetsにChartDataEntryを入れたLineChartDataSetをappendすることで,DataSetの配列を作ります.
最後にChartViewのdataにLineChartData型でインスタンスを入れることで,複数の折れ線グラフを書くことができます.

空のChartDataEntry配列をentriesに追加してから,データを追加しないとOut of rangeになります.(ここで一回詰みかけました...)
Swiftの多重配列について,この記事が一番わかりやすいと思いました

Swiftで多次元配列を使う場合
http://qiita.com/art_526/items/9282b63f51d85f58c3e5

最後に

ここまでくれば安泰ですね
線の色や,座標のサークルなど見た目の変更はdataSetのプロパティをいじったりすれば変えられるようです.

[Swift] [iOS] チャート表示ライブラリ [ios-charts] 詳細な使い方
http://qiita.com/touyu/items/9b77647cf7c97362da10

[Swift] [iOS] チャート表示ライブラリ [ios-charts] 軸に関する設定
http://qiita.com/touyu/items/b4011e260cc22d0af8d5

丁寧にまとまっててありがたや〜

間違ってる箇所などあれば、コメントにお願いします!