(Swift) Chart 直方圖 進階操作
Published in
7 min readMar 3, 2023
目的:學習 BarChartView 細部的操作
- 隱藏背景的格線
- 隱藏表格中的數值
- 修改直方寬度、直方陰影、直方的邊框顏色與線寬
- 取消點擊與縮放事件
- 改變 直方圖顏色
- 水平直方圖
- 給定出不同的數值,給予不同的文字顏色
環境:OSX 13.2 + Xcode 11.3 + Charts 4.1.0
基本的 Charts 操作可以參考這一篇
隱藏背景的格線
@IBOutlet weak var myView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
....
// 將 x 方向的格式修改成我們設定的字串
myView.xAxis.valueFormatter = IndexAxisValueFormatter(values: monthArray)
// 隱藏 x 垂直的隔線
myView.xAxis.drawGridLinesEnabled = false
// 在 X 軸上繪製一條水平的軸線
myView.xAxis.drawAxisLineEnabled = true
// 隱藏 y 軸水平線
myView.leftAxis.drawGridLinesEnabled = false
myView.rightAxis.drawGridLinesEnabled = false
隱藏表格中的數值
@IBOutlet weak var myView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
....
// x 標籤相對於圖表的位置
myView.xAxis.labelPosition = .bottom
// 隱藏 LineChartView 中 x 軸上的標籤
myView.xAxis.labelTextColor = .clear
// 隱藏右邊欄位的資料
myView.rightAxis.enabled = false
// 隱藏左邊欄位的資料
myView.leftAxis.enabled = false
// 隱藏數值文字
myView.data?.setValueTextColor(.clear)
修改直方寬度、直方陰影、直方的邊框顏色與線寬
@IBOutlet weak var myView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
....
// 修改 直方的寬度
barChartData.barWidth = 0.85
// 開啟 直方的陰影
myView.drawBarShadowEnabled = false
// 直方 的邊框顏色、線寬
barChartDataSet.barBorderWidth = 2
barChartDataSet.barBorderColor = .red
取消點擊與縮放事件
@IBOutlet weak var myView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
....
// 關閉點擊後的變色
barChartDataSet.highlightEnabled = false
// 關閉 x 軸縮放
myView.scaleXEnabled = false
// 關閉 y 軸縮放
myView.scaleYEnabled = true
// 關閉雙擊縮放
myView.doubleTapToZoomEnabled = false
改變 直方圖顏色
@IBOutlet weak var myView: BarChartView!
// 自定義直方圖顏色
var myColors: [UIColor] = [.red, .orange, .yellow, .green, .blue, .systemRed, .systemGray, .black, .gray, .systemYellow, .systemMint, .purple]
override func viewDidLoad() {
super.viewDidLoad()
....
let barChartDataSet = BarChartDataSet(entries: dataEntry, label: "test")
// 設為 單一顏色
barChartDataSet.colors = [.red]
// 設為 內置的顏色模版 ChartColorTemplates
barChartDataSet.colors = ChartColorTemplates.joyful()
// 設為 自己排列的顏色
barChartDataSet.colors = myColors
水平直方圖
其實水平的直方圖跟一般的直方圖設置都大同小異,只差在它的 class
將 Class 改為 HorizontalBarChartView 即可