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

  • 0
    いいね
  • 0
    コメント

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

    はじめに

    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

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

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