しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

【Swift】Chartsを使って色々なグラフを描画してみる

Chartsというライブラリを試して色々なグラフを使ってみました。

github.com

インストール

CocoaPodsでインストールしました。

target 'MyApp' do
  use_frameworks!

  pod "Charts"
end

棒グラフ

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let barChartView = BarChartView(frame: rect)
        let entry = [
            BarChartDataEntry(x: 10, y: 30),
            BarChartDataEntry(x: 20, y: 20),
            BarChartDataEntry(x: 30, y: 40),
            BarChartDataEntry(x: 40, y: 10),
            BarChartDataEntry(x: 50, y: 30)
        ]
        let set = [
            BarChartDataSet(values: entry, label: "Data")
        ]
        barChartView.data = BarChartData(dataSets: set)
        view.addSubview(barChartView)
    }
}

f:id:llcc:20161219231209p:plain

バブルチャート

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = BubbleChartView(frame: rect)
        let entries = [
            BubbleChartDataEntry(x: 1, y: 10, size: 30),
            BubbleChartDataEntry(x: 2, y: 60, size: 10),
            BubbleChartDataEntry(x: 3, y: 20, size: 20),
            BubbleChartDataEntry(x: 4, y: 40, size: 30),
            BubbleChartDataEntry(x: 5, y: 30, size: 40),
            BubbleChartDataEntry(x: 6, y: 10, size: 20)
        ]
        let set = BubbleChartDataSet(values: entries)
        chartView.data = BubbleChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219231744p:plain

ロウソク足

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = CandleStickChartView(frame: rect)
        let entries = [
            CandleChartDataEntry(x: 1, shadowH: 12, shadowL: 10, open: 11, close: 11),
            CandleChartDataEntry(x: 2, shadowH: 20, shadowL: 15, open: 18, close: 17),
            CandleChartDataEntry(x: 3, shadowH: 30, shadowL: 24, open: 26, close: 28),
        ]
        let set = CandleChartDataSet(values: entries, label: "Test")
        chartView.data = CandleChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219232244p:plain

横棒グラフ

データは棒グラフ同様、BarChartDataを使います。

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = HorizontalBarChartView(frame: rect)
        let entry = [
            BarChartDataEntry(x: 1, y: 30),
            BarChartDataEntry(x: 2, y: 20),
            BarChartDataEntry(x: 3, y: 40),
            BarChartDataEntry(x: 4, y: 10),
            BarChartDataEntry(x: 5, y: 30)
        ]
        let set = BarChartDataSet(values: entry, label: "Data")
        chartView.data = BarChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219232913p:plain

折れ線グラフ

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = LineChartView(frame: rect)
        let entries = [
            BarChartDataEntry(x: 1, y: 30),
            BarChartDataEntry(x: 2, y: 20),
            BarChartDataEntry(x: 3, y: 40),
            BarChartDataEntry(x: 4, y: 10),
            BarChartDataEntry(x: 5, y: 30)
        ]
        let set = LineChartDataSet(values: entries, label: "Data")
        chartView.data = LineChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219233138p:plain

円グラフ

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = PieChartView(frame: rect)
        let entries = [
            PieChartDataEntry(value: 10, label: "A"),
            PieChartDataEntry(value: 20, label: "B"),
            PieChartDataEntry(value: 30, label: "C"),
            PieChartDataEntry(value: 40, label: "D"),
            PieChartDataEntry(value: 50, label: "E")
        ]
        let set = PieChartDataSet(values: entries, label: "Data")
        chartView.data = PieChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219233402p:plain

レーダーチャート

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = RadarChartView(frame: rect)
        let entries = [
            RadarChartDataEntry(value: 40),
            RadarChartDataEntry(value: 30),
            RadarChartDataEntry(value: 20),
            RadarChartDataEntry(value: 40),
        ]
        let set = RadarChartDataSet(values: entries, label: "Data")
        chartView.data = RadarChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219233623p:plain

点グラフ

import UIKit
import Charts

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var rect = view.bounds
        rect.origin.y += 20
        rect.size.height -= 20
        let chartView = ScatterChartView(frame: rect)
        let entries = [
            BarChartDataEntry(x: 1, y: 10),
            BarChartDataEntry(x: 2, y: 15),
            BarChartDataEntry(x: 3, y: 9),
            BarChartDataEntry(x: 4, y: 13),
        ]
        
        let set = ScatterChartDataSet(values: entries, label: "Data")
        chartView.data = ScatterChartData(dataSet: set)
        view.addSubview(chartView)
    }
}

f:id:llcc:20161219233942p:plain

まとめ

今回は簡単に一通りのグラフに触れてみました。
どれも同じようなインターフェースな為、一つ実装すれば他のものも同じように作れそうです。