😸
【分かりやすく解説】iOSのライブラリのChartsのコード
一個一個コードをスクショ付きで解説していきます。
一番下にコードも貼っておきます。
『.rightAxis.enabled = true』と書くと
グラフの右側に数字が表示されます。
『.rightAxis.enabled = false』と書くと
グラフの右側に数字が表示されません。
『.labelPosition = .insideChart』と書くと
グラフの内側に数字が表示されます。
『.labelPosition = .outsideChart』と書くと
グラフの外側に数字が表示されます。
『.labelPosition = .top』と書くと
x軸(横の軸)の数字がグラフの上に表示されます。
『.labelPosition = .topInSide』と書くと
x軸(横の軸)の数字がグラフの上かつ内側に表示されます。
『.labelPosition = .bottom』と書くと
x軸(横の軸)の数字がグラフの下に表示されます。
『.labelPosition = .bottomInSide』と書くと
x軸(横の軸)の数字がグラフの下かつ内側に表示されます。
『.centerInSuperview()』と書かないと
デフォルトではどうやらグラフが上に表示されるようです。
『.centerInSuperview()』と書くと
グラフが真ん中に表示されるようになります。
『.mode = .cubicBezier』と書かないと
グラフの線が直線で表示されます。
『.mode = .cubicBezier』と書くと
グラフの線が曲線で表示されます。
『.drawCirclesEnabled = true』と書くと
グラフの上に丸が表示されるようになります。
『.drawCirclesEnabled = false』と書くと
グラフの上に丸が表示されなくなります。
『.drawFilledEnabled = false』と書くと
普通のグラフの線を表示します。
『.drawFilledEnabled = true』と書くと
グラフの線の下の面積も表示します。
『.drawHorizontalHighlightIndicatorEnabled = true』と書くと
グラフをタップした時に横線が表示されるようになります。
『.drawHorizontalHighlightIndicatorEnabled = false』と書くと
グラフをタップした時に横線が表示されなくなります。
『set1.drawVerticalHighlightIndicatorEnabled = true』と書くと
グラフをタップした時に縦線が表示されるようになくなります。
『set1.drawVerticalHighlightIndicatorEnabled = false』と書くと
グラフをタップした時に縦線が表示されなくなります。
『.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
Discussion