[Swift] [iOS] チャート表示ライブラリ [ios-charts]

  • 84
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

目的

swiftでのios開発時に、グラフやチャートの表示にめっちゃ使えるライブラリ、ios-chartsの使い方をメモっておこうと思います。

ios-chartsとは

Daniel Cohen Gindi氏作成のチャート、グラフ表示を簡単にするライブラリ。

インストール

CocoaPodsを使用。
Podfileに以下を記述

platform :ios, '9.0'
pod 'Charts'
use_frameworks!

できること

グラフ、チャートの表示

Line Chart (折れ線グラフ)

Simulator Screen Shot 2016.02.01 14.15.55.png
  

Bar Chart (棒グラフ)

Simulator Screen Shot 2016.02.01 14.18.58.png
  

Horizontal Bar Chart (横棒グラフ)

Simulator Screen Shot 2016.02.01 14.19.10.png
  

Combined Chart (コンビネーショングラフ)

Simulator Screen Shot 2016.02.01 14.19.16.png
  

Pie Chart (円グラフ)

Simulator Screen Shot 2016.02.01 14.19.23.png
  

Scatter Bar Chart (散布図)

Simulator Screen Shot 2016.02.01 14.19.27.png
  

Bubble Chart (バブルチャート)

Simulator Screen Shot 2016.02.01 14.19.31.png
  

Stacked Bar Chart (積み上げ棒グラフ)

Simulator Screen Shot 2016.02.01 14.19.34.png

  

Stacked Bar negative Chart (積み上げ横棒グラフ、人口ピラミッドグラフ)

Simulator Screen Shot 2016.02.01 14.19.40.png
  

Multiple Line Chart (複数の折れ線グラフ)

Simulator Screen Shot 2016.02.01 14.19.47.png
  

Multiple Bar Chart (複数の棒グラフ)

Simulator Screen Shot 2016.02.01 14.19.52.png
  

Candle Stick Chart (ローソク足チャート)

Simulator Screen Shot 2016.02.01 14.19.55.png
  

Cubic Line Chart

Simulator Screen Shot 2016.02.01 14.20.02.png
  

Radar Bar Chart (レーダーチャート)

Simulator Screen Shot 2016.02.01 14.20.07.png
  

Sinus Bar Chart

Simulator Screen Shot 2016.02.01 14.20.28.png
  

使用例

完成図

Simulator Screen Shot 2016.02.01 15.18.00.png

コード

storyboardにViewを配置する。
ViewのCustom ClassにBarChartViewを指定し、コードにIBOutletで接続。

@IBOutlet var barChartView: BarChartView!

最終的には以下のように記述。

import UIKit
import Charts

class ViewController: UIViewController {

    // storyboardから接続
    @IBOutlet weak var barChartView: BarChartView!

    var months: [String]!

    override func viewDidLoad() {
        super.viewDidLoad()

        months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        let unitsSold = [50.3, 68.3, 113.3, 115.7, 160.8, 214.0, 220.4, 132.1, 176.2, 120.9, 71.3, 48.0]

        barChartView.animate(yAxisDuration: 2.0)
        barChartView.pinchZoomEnabled = false
        barChartView.drawBarShadowEnabled = false
        barChartView.drawBordersEnabled = true
        barChartView.descriptionText = "京都府の月毎の降水量グラフ"

        setChart(months, values: unitsSold)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func setChart(dataPoints: [String], values: [Double]) {
        barChartView.noDataText = "You need to provide data for the chart."

        var dataEntries: [BarChartDataEntry] = []

        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }

        let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "降水量")
        let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
        barChartView.data = chartData  
    }

}

詳細な使用例

[Swift] [iOS] チャート表示ライブラリ [ios-charts] 詳細な使い方 (メソッド、プロパティ)