【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で普通の折れ線グラフを書く
普通の何にも凝ってない折れ線グラフを書きます．
実行結果
ソースコード
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で複数の折れ線グラフを書く
実行結果
ソースコード
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
丁寧にまとまっててありがたや〜
間違ってる箇所などあれば、コメントにお願いします！
Author And Source
この問題について(【Swift】Chartsで複数の折れ線グラフの書き方), 我々は、より多くの情報をここで見つけました https://qiita.com/chilitreat/items/ebf8d3b4737d83596548著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .