[Swift5] Charts の折れ線グラフをカスタマイズする

個人開発のiOSアプリでChartsの折れ線グラフについて調べたことをまとめました。

iOS Chartsとは

様々な形のグラフを生成できるSwiftライブラリ。折れ線グラフ以外にも棒グラフ、パイチャートなど種類とデザインが豊富。

インストール

sudo gem install cocoapods
pod setup

cd /Users/XXX/your_xcode_directory
pod init
vim Podfile
---------------------
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'XXXXX' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for XXXXX

# ここに追加したいライブラリを設定
pod 'Charts'

end
---------------------
pod install

Chartsの利用例

・import Charts する
・StoryBoardを使う場合は、UIViewをセットしてLineChartViewのクラスとしてコードと繋ぐ
・LineChartDataSetにデータ要素(entries)、各種設定を追加
・調整したDataSetをLineChartViewに追加
・LineChartViewへグラフの設定をして完成

import UIKit
import Charts

class StatsViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!

    // モック用データ
    let rawDataGraph: [Int] = [130, 240, 500, 550, 670, 800, 950, 1300, 1400, 1500, 1700, 2100, 2500, 3600, 4200, 4300, 4700, 4800, 5400, 5800, 5900, 6700]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Chart dataSet準備
        let entries = rawDataGraph.enumerated().map { ChartDataEntry(x: Double($0.offset), y: Double($0.element)) }
        let dataSet = LineChartDataSet(entries: entries)
        // 線の太さ
        dataSet.lineWidth = 5
        // 各プロットのラベル表示
        dataSet.drawValuesEnabled = false
        // 各プロットの丸表示
        dataSet.drawCirclesEnabled = true
        // 各プロットの丸の大きさ
        dataSet.circleRadius = 2
        // 各プロットの丸の色
        dataSet.circleColors = [UIColor.lightGray]

        // 作成したデータセットをLineChartViewに追加    
        lineChartView.data = LineChartData(dataSet: dataSet)

        // X軸のラベルの位置を下に設定
        lineChartView.xAxis.labelPosition = .bottom
        // X軸のラベルの色を設定
        lineChartView.xAxis.labelTextColor = .systemGray
        // X軸の線、グリッドを非表示にする
        lineChartView.xAxis.drawGridLinesEnabled = false
        lineChartView.xAxis.drawAxisLineEnabled = false

        // 右側のY座標軸は非表示にする
        lineChartView.rightAxis.enabled = false

        // Y座標の値が0始まりになるように設定
        lineChartView.leftAxis.axisMinimum = 0.0
        lineChartView.leftAxis.axisMaximum = 10000.0
        lineChartView.leftAxis.drawZeroLineEnabled = true
        lineChartView.leftAxis.zeroLineColor = .systemGray

        // グラフに境界線(横)を追加
        let limitLine = ChartLimitLine(limit: 7200, label: "AAAAA")
        limitLine.lineColor = .darkGray
        limitLine.valueTextColor = .darkGray
        lineChartView.leftAxis.addLimitLine(limitLine)

        // グラフに境界線(縦)を追加        
        let limitLineX = ChartLimitLine(limit: 3, label: "BBBBB")
        limitLineX.lineColor = .darkGray
        limitLineX.valueTextColor = .darkGray
        lineChartView.xAxis.addLimitLine(limitLineX)

        // ラベルの数を設定
        lineChartView.leftAxis.labelCount = 5
        // ラベルの色を設定
        lineChartView.leftAxis.labelTextColor = .systemGray
        // グリッドの色を設定
        lineChartView.leftAxis.gridColor = .systemGray
        // 軸線は非表示にする
        lineChartView.leftAxis.drawAxisLineEnabled = false

        // 凡例を非表示
        lineChartView.legend.enabled = false

        // タップでプロットを選択できないようにする
        lineChartView.highlightPerTapEnabled = false
        // ピンチズームオフ
        lineChartView.pinchZoomEnabled = false
        // ダブルタップズームオフ
        lineChartView.doubleTapToZoomEnabled = false

        // アニメーションをつける
        lineChartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.3, easingOption: .easeInCubic)

    }
}