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


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

#はじめに
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](https://qiita-image-store.s3.amazonaws.com/0/137949/51d7480b-7f51-5cc0-90cd-857a5d8f6ab2.png)

##ソースコード
```swift: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](https://qiita-image-store.s3.amazonaws.com/0/137949/363fc054-1c68-9069-33bf-f7f61a2d1f55.png)

##ソースコード

```swift: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

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




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