【分かりやすく解説】iOSのライブラリのChartsのコード

###### 一個一個コードをスクショ付きで解説していきます。
###### 一番下にコードも貼っておきます。

# 『.rightAxis.enabled = true』と書くと

![](https://storage.googleapis.com/zenn-user-upload/13aebd7d915a-20230630.png)

#### グラフの右側に数字が表示されます。

# 『.rightAxis.enabled = false』と書くと

![](https://storage.googleapis.com/zenn-user-upload/4a1ca53be22c-20230630.png)

#### グラフの右側に数字が表示されません。

# 『.labelPosition = .insideChart』と書くと

![](https://storage.googleapis.com/zenn-user-upload/b87579772728-20230630.png)

#### グラフの内側に数字が表示されます。

# 『.labelPosition = .outsideChart』と書くと

![](https://storage.googleapis.com/zenn-user-upload/1b2a4baeee63-20230630.png)

#### グラフの外側に数字が表示されます。

# 『.labelPosition = .top』と書くと

![](https://storage.googleapis.com/zenn-user-upload/f84f102a6543-20230630.png)

#### x軸(横の軸)の数字がグラフの上に表示されます。

# 『.labelPosition = .topInSide』と書くと

![](https://storage.googleapis.com/zenn-user-upload/1de652b4583a-20230630.png)

#### x軸(横の軸)の数字がグラフの上かつ内側に表示されます。

# 『.labelPosition = .bottom』と書くと

![](https://storage.googleapis.com/zenn-user-upload/04f2bed7e689-20230630.png)

#### x軸(横の軸)の数字がグラフの下に表示されます。

# 『.labelPosition = .bottomInSide』と書くと

![](https://storage.googleapis.com/zenn-user-upload/fe4dad1c6f1f-20230630.png)

#### x軸(横の軸)の数字がグラフの下かつ内側に表示されます。

# 『.centerInSuperview()』と書かないと

![](https://storage.googleapis.com/zenn-user-upload/4b94a448be62-20230630.png)

#### デフォルトではどうやらグラフが上に表示されるようです。

# 『.centerInSuperview()』と書くと

![](https://storage.googleapis.com/zenn-user-upload/b0c03663c654-20230630.png)

#### グラフが真ん中に表示されるようになります。

# 『.mode = .cubicBezier』と書かないと

![](https://storage.googleapis.com/zenn-user-upload/ce574584d9a9-20230630.png)

#### グラフの線が直線で表示されます。

# 『.mode = .cubicBezier』と書くと

![](https://storage.googleapis.com/zenn-user-upload/eb347fb533e7-20230630.png)

#### グラフの線が曲線で表示されます。

# 『.drawCirclesEnabled = true』と書くと

![](https://storage.googleapis.com/zenn-user-upload/260b1695f2cc-20230630.png)

#### グラフの上に丸が表示されるようになります。

# 『.drawCirclesEnabled = false』と書くと

![](https://storage.googleapis.com/zenn-user-upload/0bea738ab501-20230630.png)

#### グラフの上に丸が表示されなくなります。

# 『.drawFilledEnabled = false』と書くと

![](https://storage.googleapis.com/zenn-user-upload/18c31d2b23dc-20230630.png)

#### 普通のグラフの線を表示します。

# 『.drawFilledEnabled = true』と書くと

![](https://storage.googleapis.com/zenn-user-upload/8683571ab81c-20230630.png)

#### グラフの線の下の面積も表示します。

# 『.drawHorizontalHighlightIndicatorEnabled = true』と書くと

![](https://storage.googleapis.com/zenn-user-upload/314e7c632ef5-20230630.png)

#### グラフをタップした時に横線が表示されるようになります。

# 『.drawHorizontalHighlightIndicatorEnabled = false』と書くと

![](https://storage.googleapis.com/zenn-user-upload/f793d6b27c80-20230630.png)

#### グラフをタップした時に横線が表示されなくなります。

# 『set1.drawVerticalHighlightIndicatorEnabled = true』と書くと

![](https://storage.googleapis.com/zenn-user-upload/496782794bb4-20230630.png)

#### グラフをタップした時に縦線が表示されるようになくなります。

# 『set1.drawVerticalHighlightIndicatorEnabled = false』と書くと

![](https://storage.googleapis.com/zenn-user-upload/b6609a043359-20230630.png)

#### グラフをタップした時に縦線が表示されなくなります。

# 『.animate(xAxisDuration: 数字)』と書くと

#### グラフにアニメーションが付きます。数字でアニメーションの速度を調整することができます。

# 【「ViewController」のコード】
```
import UIKit
import DGCharts
import TinyConstraints

class ViewController: UIViewController,ChartViewDelegate {
    
    lazy var lineChartView: LineChartView = {
        let chartView = LineChartView()
        
        chartView.backgroundColor = .systemBlue
        // chartView.rightAxis.enabled = true
        chartView.rightAxis.enabled = false
        
        let yAxis = chartView.leftAxis
        yAxis.labelFont = .boldSystemFont(ofSize: 12)
        yAxis.setLabelCount(6, force: false)
        yAxis.labelTextColor = .white
        yAxis.axisLineColor = .white
        // 「.insideChart」もあれば「.outsideChart」もある。
        yAxis.labelPosition = .outsideChart
        // 「.bottom」もあれば「bothSided」「bottomInSide」「top」「topInSide」もある。
        chartView.xAxis.labelPosition = .bottom
        chartView.xAxis.labelFont = .boldSystemFont(ofSize: 12)
        chartView.xAxis.setLabelCount(6, force: false)
        chartView.xAxis.labelTextColor = .white
        chartView.xAxis.axisLineColor = .systemBlue
        
        chartView.animate(xAxisDuration: 2.5)
        
        return chartView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(lineChartView)
        lineChartView.centerInSuperview()
        lineChartView.width(to: view)
        lineChartView.heightToWidth(of: view)
        setData()
    }
    
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        print(entry)
    }
    func setData() {
        let set1 = LineChartDataSet(entries: yValues, label: "Subscribers")
        set1.mode = .cubicBezier
        // set1.drawCirclesEnabled = true
        set1.drawCirclesEnabled = false
        set1.lineWidth = 3
        set1.setColor(.white)
        set1.fillAlpha = 0.8
        // set1.drawFilledEnabled = false
        set1.drawFilledEnabled = true
        
        // 【横線】
        // set1.drawHorizontalHighlightIndicatorEnabled = true
        set1.drawHorizontalHighlightIndicatorEnabled = false
        
        // 【縦線】
        // set1.drawVerticalHighlightIndicatorEnabled = true
        set1.drawVerticalHighlightIndicatorEnabled = false
        
        set1.highlightColor = .systemRed
        
        let data = LineChartData(dataSet: set1)
        // data.setDrawValues(true)
        data.setDrawValues(false)
        
        lineChartView.data = data
    }
    
    let yValues: [ChartDataEntry] = [
        ChartDataEntry(x: 0.0, y: 10.0),
        ChartDataEntry(x: 1.0, y: 5.0),
        ChartDataEntry(x: 2.0, y: 7.0),
        ChartDataEntry(x: 3.0, y: 5.0),
    ]

}
```

#### ※ 学習していく過程で理解できた内容が増え次第追記していきます。

# 参考動画
Chart in Swift - Setting Up a Basic Line Chart Using iOS Charts
https://www.youtube.com/watch?v=mWhwe_tLNE8&t=2s