「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) //グラフのアニメーション(秒数で設定)
}
}
参考になった!という方は👍ボタンお願いします ↓↓↓
コメント