グラフの表示

「Charts」という有名なライブラリーを使用して棒グラフを表示。
Githubリンク:https://github.com/danielgindi/Charts

完成形はこれ

バーチャート(棒グラフ)を作成します。

ライブラリーのインストール

Cocoapodsのセットアップは以下参照↓

Podfile内にpod ‘Charts’と記載して、ターミナルでpod installしましょう。

Main.storyboardの編集

ストーリボードにUIViewを1つ配置するだけです。Classは“BarCharView”にします。

ViewController.swiftの編集

ストーリボードで配置したViewは、ViewControllerにひも付けましょう。今回は“barChart”という名前でひも付けてます。グラフ用途は様々ですが、X軸ラベルに日付を設定してみます。棒グラフの数字になるデータは適当に入力してますので、ご了承ください。

import UIKit
import Charts

class ViewController: UIViewController {
    
    @IBOutlet weak var barChart: BarChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        getChart()
        
    }
    
    
    func getChart(){
        //適当に数字を入れた配列を作成しておく
        var labels:[String] = ["1","2","3","4","5","6","7"]
        
        //X軸のラベルに使うデータを作成する 少し面倒だけど日付にしてみる
        //日本時間を表示する準備・・・
        let formatterJP = DateFormatter()
        formatterJP.dateFormat = DateFormatter.dateFormat(fromTemplate: "dMEE", options: 0, locale: Locale(identifier: "ja_JP"))
        formatterJP.timeZone = TimeZone(identifier:  "Asia/Tokyo")
        
        let day1 = Date(timeIntervalSinceNow: -(60*60*24)) //1日前
    //  let day2 = Date() //当日 今回これはチャートに表示させない
        let day3 = Date(timeIntervalSinceNow: 60*60*24) //1日後
        let day4 = Date(timeIntervalSinceNow: 60*60*48) //2日後
        let day5 = Date(timeIntervalSinceNow: 60*60*72) //3日後
        let day6 = Date(timeIntervalSinceNow: 60*60*96) //4日後
        let day7 = Date(timeIntervalSinceNow: 60*60*120) //5日後
        
        let time1 = "\(formatterJP.string(from: day1))"
   //   let time2 = "\(formatterJP.string(from: day2))" //当日 今回これはチャートに表示させない
        let time3 = "\(formatterJP.string(from: day3))"
        let time4 = "\(formatterJP.string(from: day4))"
        let time5 = "\(formatterJP.string(from: day5))"
        let time6 = "\(formatterJP.string(from: day6))"
        let time7 = "\(formatterJP.string(from: day7))"
        
        //labels配列に1つずつ代入していく
        labels[0] = time1
        labels[1] = "今日"  //ここだけ手書きにしてみる
        labels[2] = time3
        labels[3] = time4
        labels[4] = time5
        labels[5] = time6
        labels[6] = time7
        
        
        //適当に、棒グラフに使う数字をInt型配列で作成
        let rawData: [Int] = [10, 20, 40, 80, 100, 80, 40]
        let entries = rawData.enumerated().map { BarChartDataEntry(x: Double($0.offset), y: Double($0.element)) }
        let dataSet = BarChartDataSet(entries: entries)
        let data = BarChartData(dataSet: dataSet)
        barChart.data = data
        
        //ラベルに表示するデータを指定 上で作成した「labels」を指定
        barChart.xAxis.valueFormatter = IndexAxisValueFormatter(values:labels)
        barChart.xAxis.granularity = 1
        // ラベルの数を設定
        barChart.xAxis.labelCount = 7
        // X軸のラベルの位置を下に設定
        barChart.xAxis.labelPosition = .bottom
        // X軸のラベルの色,文字サイズを設定
        barChart.xAxis.labelTextColor = .gray
        barChart.xAxis.labelFont = UIFont(name: "HelveticaNeue-Light", size: 8.0)!
        // X軸の線、グリッドを非表示にする
        barChart.xAxis.drawGridLinesEnabled = false
        barChart.xAxis.drawAxisLineEnabled = false
        // 右側のY座標軸は非表示にする
        barChart.rightAxis.enabled = false
        // Y座標の値が0始まりになるように設定
        barChart.leftAxis.axisMinimum = 0 //y左軸最小値
        barChart.leftAxis.axisMaximum = 100 //y左軸最大値
        barChart.leftAxis.drawZeroLineEnabled = true
        barChart.leftAxis.zeroLineColor = .gray
        // ラベルの数を設定
        barChart.leftAxis.labelCount = 10
        // ラベルの色を設定
        barChart.leftAxis.labelTextColor = .gray
        // グリッドの色を設定
        barChart.leftAxis.gridColor = .gray
        // 軸線は非表示にする
        barChart.leftAxis.drawAxisLineEnabled = false
        //凡例削除
        barChart.legend.enabled = false
        //色の指定 数値の表示非表示
        dataSet.drawValuesEnabled = false
        //dataSet.colors = [.gray]
        dataSet.colors = [UIColor.systemGreen, .systemPink, UIColor.systemGreen, UIColor.systemGreen, UIColor.systemGreen, UIColor.systemGreen, UIColor.systemGreen ]
        
        //その他設定
        barChart.dragDecelerationEnabled = true //指を離してもスクロール続くか
        barChart.dragDecelerationFrictionCoef = 0.6 //ドラッグ時の減速スピード(0-1)
        barChart.chartDescription?.text = nil //Description(今回はなし)
        barChart.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1) //Background Color
        barChart.doubleTapToZoomEnabled = false  //ダブルタップでの拡大禁止
        barChart.animate(xAxisDuration: 2.5, yAxisDuration: 2.5, easingOption: .linear) //グラフのアニメーション(秒数で設定)
        
        
    }
    
}

参考になった!という方は👍ボタンお願いします ↓↓↓

コメント

タイトルとURLをコピーしました