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

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

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

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

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

手順1はこっち時間を計測する関数を作成し、結果を配列に加える

完成形

2.1 CocoaPodsのインストール + import

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

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

import UIKit
import Charts

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

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

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

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

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

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	グラフの線の形（概要）

完成形コード

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/