[Swift]グラフを作成するライブラリChartsを使って折れ線グラフを描画してみた

Chartsとは？

• アプリでグラフを描画する際に使用されるライブラリです。
• 以前はios-chartsという名前だったようです。
  https://github.com/danielgindi/Charts

導入

• CocoaPods、Carthage、Swift Package Managerを用いてインストールすることができます。（詳しい導入方法はChartsのGitHubのリンクを参照ください）

現時点での最新バージョン（v4.0.1）は以下の環境が必要なります。

- Xcode 11 / Swift 5 (master branch)
- iOS >= 8.0 (Use as an Embedded Framework)
- tvOS >= 9.0
- macOS >= 10.11

• 今回、私はSwift Package Managerを用いてインストールしました。
• Swift Package Managerを用いたライブラリの導入方法は次の記事が参考になります。
  Xcode 11 + Swift Package Managerでライブラリを管理する

作成した折れ線グラフ

• 以下の画像が今回作成した折れ線グラフになります。
• 通常の折れ線グラフを少し曲線にして、アニメーションをかけています。
  

コード

import UIKit
import Charts

class ViewController: UIViewController {
    
    var chartView: LineChartView!
    var chartDataSet: LineChartDataSet!
    // 今回使用するサンプルデータ
    let sampleData = [88.0, 99.0, 93.0, 67.0, 45.0, 72.0, 58.0, 91.0, 81.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // グラフを表示する
        displayChart(data: sampleData)
    }
    
    func displayChart(data: [Double]) {
        // グラフの範囲を指定する
        chartView = LineChartView(frame: CGRect(x: 0, y: 200, width: view.frame.width, height: 400))
        // プロットデータ(y軸)を保持する配列
        var dataEntries = [ChartDataEntry]()
        
        for (xValue, yValue) in data.enumerated() {
            let dataEntry = ChartDataEntry(x: Double(xValue), y: yValue)
            dataEntries.append(dataEntry)
        }
        // グラフにデータを適用
        chartDataSet = LineChartDataSet(entries: dataEntries, label: "SampleDataChart")
        
        chartDataSet.lineWidth = 5.0 // グラフの線の太さを変更
        chartDataSet.mode = .cubicBezier // 滑らかなグラフの曲線にする
        
        chartView.data = LineChartData(dataSet: chartDataSet)
        
        // X軸(xAxis)
        chartView.xAxis.labelPosition = .bottom // x軸ラベルをグラフの下に表示する
        
        // Y軸(leftAxis/rightAxis)
        chartView.leftAxis.axisMaximum = 100 //y左軸最大値
        chartView.leftAxis.axisMinimum = 0 //y左軸最小値
        chartView.leftAxis.labelCount = 6 // y軸ラベルの数
        chartView.rightAxis.enabled = false // 右側の縦軸ラベルを非表示
        
        // その他の変更
        chartView.highlightPerTapEnabled = false // プロットをタップして選択不可
        chartView.legend.enabled = false // グラフ名（凡例）を非表示
        chartView.pinchZoomEnabled = false // ピンチズーム不可
        chartView.doubleTapToZoomEnabled = false // ダブルタップズーム不可
        chartView.extraTopOffset = 20 // 上から20pxオフセットすることで上の方にある値(99.0)を表示する
        
        chartView.animate(xAxisDuration: 2) // 2秒かけて左から右にグラフをアニメーションで表示する
        
        view.addSubview(chartView)
    }
}

まとめ

• Chartsライブラリを使うことで簡単にグラフを作成することが出来ました。
• 今回紹介した内容以外にもデザインを変更することが出来るので、今後も様々なグラフの作成方法を学んでいきたいと思います。

参考

https://github.com/danielgindi/Charts