経過時間を計測してグラフを出力する

経過時間を計測してグラフを出力する機能を実装していくうう

手順1.2の二つの記事に分けて記述します。

手順
1.時間を計測する関数を作成し、結果を配列に加える
2.経過時間の配列からグラフを作成し表示

今回は手順2の記述していく。

手順1はこっち[時間を計測する関数を作成し、結果を配列に加える](https://qiita.com/naoking21/items/610fc9c1792a3aae3081#11-%E3%81%BE%E3%81%9A%E5%88%9D%E3%82%81%E3%81%AB%E5%A4%89%E6%95%B0%E3%83%91%E3%83%BC%E3%83%84%E3%82%92%E3%81%84%E3%81%8F%E3%81%A4%E3%81%8B%E5%AE%A3%E8%A8%80%E3%81%97%E3%81%BE%E3%81%99)

##完成形
![Dec-11-2021 09-17-55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583218/f38c3557-314b-c776-f52a-ee6bd389b81f.gif)


####2.1 CocoaPodsのインストール + import
プロジェクト内にpodファイルを作成し、`pod ‘Charts’`を記述し、pod installのコマンドを実施します。

![スクリーンショット 2021-12-11 午前9.24.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583218/2074ea0b-07c3-d2c0-7071-953456e0a912.jpeg)

次にViewControllerで`import Charts`を記述しインポートする。

```swift
import UIKit
import Charts

class ViewController: UIViewController {
        //~~色々~
    }

```


####2.2変数・パーツを宣言します。

|変数名  |型・クラス  |役割  |
|---|---|---|
|chartView  |LineChartView  |グラフを作成するためのクラス  |

`Main.StoryBoard`の`ViewController`上に`UIView`を設置し、**クラス**を`LineChartView`、**モジュール**を`Charts`に設定します。

![スクリーンショット 2021-12-11 午前11.42.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583218/94451267-bf65-005a-4724-0d56b09e4222.jpeg)


####2.3グラフを作成する関数を作成

```swift

func displayChart(data: [Double]) {
        //既存のグラフを削除する
        chartView.removeFromSuperview()
        // グラフの範囲を指定する(x軸、y軸,幅,高さを指定)
        chartView = LineChartView(frame: CGRect(x: 0, y: 300, width: view.frame.width, height: 400))
        // データを保持する配列を宣言
        var dataEntries = [ChartDataEntry]()
        
        //配列に要素数を指定する
        //グラフの要素にはx座標,y座標が必要なので二次元配列に変換
        for (xValue, yValue) in data.enumerated() {
            let dataEntry = ChartDataEntry(x: Double(xValue) + 1.0, y: Double(yValue))
            dataEntries.append(dataEntry)
        }
        print(dataEntries)
        //LineChartDataSetのインスタンス作成
        var chartDataSet: LineChartDataSet!
        // グラフにデータを適用
        chartDataSet = LineChartDataSet(entries: dataEntries, label: "SampleDataChart")
        
        // グラフの線の太さを変更
        chartDataSet.lineWidth = 5.0
        //グラフの線の色を指定（UIColor型の配列）
        chartDataSet.colors = [.red]
        //グラフの要素の円の色（UIColor型の配列）
        chartDataSet.circleColors = [.purple]
        //グラフの各要素の円の中の色
        chartDataSet.circleHoleColor = .green

        //折れ線グラフになる
        // .cubicBezier　にするときれいな曲線になる
        chartDataSet.mode = .linear
        
        chartView.data = LineChartData(dataSet: chartDataSet)
        
        // x軸ラベルをグラフの下に表示する
        chartView.xAxis.labelPosition = .bottom
        
        let maxValue = data.max()
        // Y軸(leftAxis/rightAxis)
        if data.max()! > 200 {
            chartView.leftAxis.axisMaximum = maxValue! + 20 //y左軸最大値
        }else{
            chartView.leftAxis.axisMaximum = 200

        }
        //y左軸最小値
        chartView.leftAxis.axisMinimum = 0
        chartView.leftAxis.labelCount = 6
        // y軸ラベルの数
        chartView.xAxis.labelCount = data.count - 1
        // 右側の縦軸ラベルを非表示
        chartView.rightAxis.enabled = false
        
        // プロットをタップして選択不可
        chartView.highlightPerTapEnabled = false
        // グラフ名（凡例）を非表示
        chartView.legend.enabled = false
        // ピンチズーム不可
        chartView.pinchZoomEnabled = false
        // ダブルタップズーム不可
        chartView.doubleTapToZoomEnabled = false
        chartView.extraTopOffset = 20
        chartView.borderColor = .blue
        
        //グラフを表示
        view.addSubview(chartView)
    }

```

**🌟捕捉説明🌟**
>        for (xValue, yValue) in data.enumerated() {
            let dataEntry = ChartDataEntry(x: Double(xValue) + 1.0, y: Double(yValue))
            dataEntries.append(dataEntry)
        }

ここに関して、
xValueには要素のインデックスが入ります。swiftの配列のインデックスは0から始まるので、
`Double(xValue) + 1.0`を行うことによって、

引数に`[1.79209303855896, 2.412806987762451]`を入れると
`[ChartDataEntry, x: 1.0, y 1.79209303855896, ChartDataEntry, x: 2.0, y 2.412806987762451]`のように配列が作成される。


**<ちょこっとメソッド紹介>**

|メソッド名  |型・クラス  |役割  |
|---|---|---|
|lineWidth  |LineChartDataSet  |グラフの線の太さ  |
|colors  |LineChartDataSet  |グラフの線の色 |
|circleColors  |LineChartDataSet  |グラフの要素の円の色  |
|circleHoleColor  |LineChartDataSet  |要素の円の中の色  |
|mode  |LineChartDataSet  |グラフの線の形（概要）  |

#####完成形コード
```swift


import UIKit
import Charts

class ViewController: UIViewController {
    
    //時間を計測中か判断する理論値を入れる変数
    var start:Bool?
    //経過時間を格納する配列
    var times : [Double] = []
    //計測開始時間を格納する変数
    var startTime = Date()
    
    @IBOutlet var button : UIButton!
    @IBOutlet var chartView : LineChartView!
    
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func button(_ sender: Any) {
        
        if start != true{
            //時間を計測していなかったら行う処理
            startTime = Date()
            //startをTrueにすることで時間を計測中にする
            self.start = true
            button.setTitle("計測中", for: .normal)
            print("計測開始")
        }else{
            //時間を計測していたら行う処理
            
            //ボタンを押した時点の時刻
            let endTime = Date()
            
            //DateクラスのtimeIntervalSince()メソッドを利用し差分を出す
            let time = Double(endTime.timeIntervalSince(startTime))
            //だした差分を配列に格納
            times.append(time)
            //startをTrueにすることで時間を計測していないことにする
            self.start = false
            button.setTitle("計測中じゃないよ", for: .normal)
            print("計測終了_計測結果")
            print(times)
            displayChart(data: times)
            
        }
        
    }
    
    func displayChart(data: [Double]) {
        //既存のグラフを削除する
        chartView.removeFromSuperview()
        // グラフの範囲を指定する(x軸、y軸,幅,高さを指定)
        chartView = LineChartView(frame: CGRect(x: 0, y: 300, width: view.frame.width, height: 400))
        // データを保持する配列を宣言
        var dataEntries = [ChartDataEntry]()
        
        //配列に要素数を指定する
        //グラフの要素にはx座標,y座標が必要なので二次元配列に変換
        for (xValue, yValue) in data.enumerated() {
            let dataEntry = ChartDataEntry(x: Double(xValue) + 1.0, y: Double(yValue))
            dataEntries.append(dataEntry)
        }
        print(dataEntries)
        //LineChartDataSetのインスタンス作成
        var chartDataSet: LineChartDataSet!
        // グラフにデータを適用
        chartDataSet = LineChartDataSet(entries: dataEntries, label: "SampleDataChart")
        
        // グラフの線の太さを変更
        chartDataSet.lineWidth = 5.0
        //グラフの線の色を指定（UIColor型の配列）
        chartDataSet.colors = [.red]
        //グラフの要素の円の色（UIColor型の配列）
        chartDataSet.circleColors = [.purple]
        //グラフの各要素の円の中の色
        chartDataSet.circleHoleColor = .green

        //折れ線グラフになる
        // .cubicBezier　にするときれいな曲線になる
        chartDataSet.mode = .linear
        
        chartView.data = LineChartData(dataSet: chartDataSet)
        
        // x軸ラベルをグラフの下に表示する
        chartView.xAxis.labelPosition = .bottom
        
        let maxValue = data.max()
        // Y軸(leftAxis/rightAxis)
        if data.max()! > 200 {
            chartView.leftAxis.axisMaximum = maxValue! + 20 //y左軸最大値
        }else{
            chartView.leftAxis.axisMaximum = 200

        }
        //y左軸最小値
        chartView.leftAxis.axisMinimum = 0
        chartView.leftAxis.labelCount = 6
        // y軸ラベルの数
        chartView.xAxis.labelCount = data.count - 1
        // 右側の縦軸ラベルを非表示
        chartView.rightAxis.enabled = false
        
        // プロットをタップして選択不可
        chartView.highlightPerTapEnabled = false
        // グラフ名（凡例）を非表示
        chartView.legend.enabled = false
        // ピンチズーム不可
        chartView.pinchZoomEnabled = false
        // ダブルタップズーム不可
        chartView.doubleTapToZoomEnabled = false
        chartView.extraTopOffset = 20
        chartView.borderColor = .blue
        
        //グラフを表示
        view.addSubview(chartView)
    }
    
}




```


参照
>https://dev.classmethod.jp/articles/charts-line-graph-sample/