【Swift/UIKit】Charts(DGCharts)の使い方！折れ線グラフの実装方法

import Charts
↓こちらに変更
import DGCharts

PodFile
pod 'DGCharts'

import UIKit
import DGCharts

class ViewController: UIViewController {

    // チャート
    private var chartView: LineChartView!
    // チャートデータ
    private var lineDataSet: LineChartDataSet!
    
    // 折れ線グラフで表示するデータ(Y軸)
    private let data: [Double] = [100.0, 65.0, 90.0, 30.0, 45.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        drawChart(y: data)
    }
    
    private func drawChart(y: [Double]) {
            
        // チャートビューのサイズと位置を定義
        self.chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 400))
        chartView.center = self.view.center
        
        // チャートに渡す用の配列を定義
        var dataEntries: [ChartDataEntry] = []
        
        // Y軸のデータリストからインデックスと値を取得し配列に格納
        for (index, value) in y.enumerated() {
            // X軸は配列のインデックス番号
            let dataEntry = ChartDataEntry(x: Double(index), y: value)
            dataEntries.append(dataEntry)
        }

        // 折れ線グラフ用のデータセット labelはグラフ名
        lineDataSet = LineChartDataSet(entries: dataEntries, label: "グラフ名")
        // グラフに反映
        chartView.data = LineChartData(dataSet: lineDataSet)

        // MARK: - ここからグラフデザイン設定
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数にする
        chartView.xAxis.labelCount = dataEntries.count - 1

        self.view.addSubview(self.chartView)        
    }
}

// グラフの線の太さ
lineDataSet.lineWidth = 5.0
// グラフモード(曲線)
lineDataSet.mode = .cubicBezier
// グラフの色
lineDataSet.colors = [UIColor.orange]
// 点の色
lineDataSet.circleColors = [UIColor.red]
// 点の大きさ
lineDataSet.circleRadius = 5.0
// 塗りつぶし 
lineDataSet.drawFilledEnabled = true
// ポインタ非表示
lineDataSet.drawCirclesEnabled = false
// ポインタデータ値の非表示
lineDataSet.drawValuesEnabled = false

// データがない場合のテキスト
chartView.noDataText = "データがありません"
// タップでの点の選択を無効
chartView.highlightPerTapEnabled = false
// ピンチでのズームを無効
chartView.pinchZoomEnabled = false
// データの最大表示範囲を制限 (データ数が多い場合横にスクロールで表示エリアを移動可能)
chartView.setVisibleXRangeMaximum(10) // ※
// データの最小表示範囲を制限 (データ数が多い場合横にスクロールで表示エリアを移動可能)
chartView.setVisibleXRangeMinimum(5) // ※
// データの表示位置を指定したX軸の値にする(インデックスではなくX軸の値を指定)
chartView.moveViewToX(Double(data.count - 1)) // ※
// 選択したX軸の位置をハイライト表示
chartView.highlightValue(x: 5, dataSetIndex: 0) // ※
// 表示されているデータの一番低い値を取得
chartView.lowestVisibleX 
// 表示されているデータの一番高い値を取得
chartView.highestVisibleX 
// ダブルタップでのズームを無効
chartView.doubleTapToZoomEnabled = false
// グラフアニメーション
chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)

// グラフ名ラベルを非表示
chartView.legend.enabled = false
// Y軸右側ラベルを非表示
chartView.rightAxis.enabled = false
// y左軸最大値
chartView.leftAxis.axisMaximum = 100
// y左軸最小値
chartView.leftAxis.axisMinimum = 0
// y軸ラベルの表示個数
chartView.leftAxis.labelCount = 10
// 上からのオフセット
chartView.extraTopOffset = 30

let dataEntry = ChartDataEntry(x: Double(index), y: value, icon: UIImage(systemName: "iphone"))

// 表示するデータ値数を指定
chartView.maxVisibleCount = 200

import UIKit
import DGCharts

class ViewController: UIViewController {

    // 折れ線グラフで表示するデータ(Y軸)
    private let data: [Double] = [100.0, 65.0, 90.0, 30.0, 45.0]
    // 折れ線グラフで表示するデータ(Y軸)
    private let data2: [Double] = [30.0, 34.0, 45.0, 20.0, 10.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let dataSet = [data,data2]
        drawChart(dataSet: dataSet)
    }
    
    private func drawChart(dataSet: [[Double]]) {
            
        // チャートビューのサイズと位置を定義
        let chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 400))
        chartView.center = self.view.center
        
        // 複数のグラフデータを保持
        var chartDataEntries: [LineChartDataSet] = []
        
        for data in dataSet {
            // チャートに渡す用の配列を定義
            var dataEntries: [ChartDataEntry] = []
            
            // Y軸のデータリストからインデックスと値を取得し配列に格納
            for (index, value) in data.enumerated() {
                // X軸は配列のインデックス番号
                let dataEntry = ChartDataEntry(x: Double(index), y: value)
                dataEntries.append(dataEntry)
            }
            // 折れ線グラフ用のデータセット
            let lineDataSet = LineChartDataSet(entries: dataEntries, label: "Test")
            
            // グラフの線の太さ
            lineDataSet.lineWidth = 3.0
            // グラフモード(曲線)
            lineDataSet.mode = .cubicBezier
            // グラフの色
            lineDataSet.colors = [UIColor.orange]
            // 点の色
            lineDataSet.circleColors = [UIColor.red]
            // 点の大きさ
            lineDataSet.circleRadius = 5.0
            chartDataEntries.append(lineDataSet)
        }
        
        // グラフに反映
        chartView.data = LineChartData(dataSets: chartDataEntries)
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        
        // タップでの点の選択を無効
        chartView.highlightPerTapEnabled = false
        // ピンチでのズームを無効
        chartView.pinchZoomEnabled = false
        // ダブルタップでのズームを無効
        chartView.doubleTapToZoomEnabled = false
        // グラフアニメーション
        chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)
        
        // データの説明ラベルを非表示
        chartView.legend.enabled = false
        // Y軸右側ラベルを非表示
        chartView.rightAxis.enabled = false
        
        // y左軸最大値
        chartView.leftAxis.axisMaximum = 100
        // y左軸最小値
        chartView.leftAxis.axisMinimum = 0
        // y軸ラベルの表示個数
        chartView.leftAxis.labelCount = 10
        // 上からのオフセット
        chartView.extraTopOffset = 30
        
        // 描画
        self.view.addSubview(chartView)
    }
}

extension ViewController: ChartViewDelegate {
    
    // タップ(パン)されたグラフ、データ、位置を取得
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {

         // グラフ内でのタップされた座標
        print(highlight.xPx, highlight.yPx)

        // タップされた位置にあるデータを取得
        print(entry.x, entry.y)
    }
}

chartView.data?.clearValues()
chartView.clear()
chartView.notifyDataSetChanged()