(Swift) Chart 直方圖 進階操作

目的：學習 BarChartView 細部的操作

• 隱藏背景的格線
• 隱藏表格中的數值
• 修改直方寬度、直方陰影、直方的邊框顏色與線寬
• 取消點擊與縮放事件
• 改變 直方圖顏色
• 水平直方圖
• 給定出不同的數值，給予不同的文字顏色

環境：OSX 13.2 + Xcode 11.3 + Charts 4.1.0

基本的 Charts 操作可以參考這一篇

(Swift) 學習使用 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 即可

GitHub

GitHub - jasonyen1009/Chart

參考資料

Swift - 第三方图表库Charts使用详解14（柱状图1：基本用法）