Xcode — DGCharts — LineChartView about Color Setting

13 min readAug 10, 2023

目錄

⦿ LineChartView
    ⦿ 大小、位置
    ⦿ 放入數據
⦿ 美術設定 - 顏色
    ⦿ 折線上顏色 - 點、標亮十字
    ⦿ 折線上顏色 - 折線本身
    ⦿ 折線附近顏色 - 數據 
    ⦿ 折線外顏色 - 邊框
    ⦿ 折線外顏色 - 背景

LineChartView

在 DGCharts 裡，要產生最基本的折線圖（Line Chart）就創建 LineChartView，設定好大小與位置，如下：

        lineChartView = LineChartView()
        self.view.addSubview(lineChartView)

        lineChartView.translatesAutoresizingMaskIntoConstraints = false
        let viewSafeLayout = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            lineChartView.leadingAnchor.constraint(
                equalTo: viewSafeLayout.leadingAnchor, constant: 44),
            lineChartView.trailingAnchor.constraint(
                equalTo: viewSafeLayout.trailingAnchor, constant: -44),
            lineChartView.topAnchor.constraint(
                equalTo: viewSafeLayout.topAnchor, constant: 32),
            lineChartView.heightAnchor.constraint(equalToConstant: 250)
        ])

接著餵數據，先看到如下：

        var dataEntries = [ChartDataEntry]()
        for i in 0..<20 {
            let y = arc4random()%50
            let entry = ChartDataEntry.init(x: Double(i+1), y: Double(y))
            dataEntries.append(entry)
        }

首先是 Data Entry，要在 X 軸與 Y 軸畫圖需要 (x, y)，即是座標數據（點），ChartDataEntry 就是為了這個目的，這邊先隨機產生 20 個點，將之加入 Data Entry，x 從 1 ~ 20，y 則是在 50 以內。

即便第一個點 x 是 1 開始，最後產生的圖也是將折線從原點連了起來，畢竟折線圖的目的就是在數據可視化後，讓人能夠了解變化趨勢。

x 從 1 ~ 20，y 是 0 ~ 50，DGCharts 就能夠透過這個數據自動判斷 X、Y 軸的範圍 —— 0 ~ 20、0 ~ 50。

let dataSet = LineChartDataSet(entries: dataEntries, label: “圖1”)

let chartData = LineChartData(dataSets: [dataSet])

lineChartView.data = chartData

接著必須把 dataEntries 放到 LineCharDataSet 裡，再把 dataSet 放到 LineChartData 裡，最後 lineChartView.data = charData 就完成了！

這裡的 data 型別為 ChartData，ChartData 包括幾個重要的 Attribute，分別為 xMax、xMin、yMax、yMin；leftAxisMax、leftAxisMin、rightAxisMax、rightAxisMin。

這即是 DGCharts 用來畫圖的重要依據，並且將 Developer 餵給它的資料去轉換出呈現的範圍。

繼續閱讀｜回目錄

美術設定 - 顏色

前面呈現的圖中，顏色、呈現樣式並非預設，由於 DataEntry 提供的是資料，視覺呈現的部份則由 DataSet 開始，我們來看看如何設定：

let dataSet = LineChartDataSet(entries: dataEntries, label: "圖1")

dataSet.drawCirclesEnabled = true
// 設定點顏色
dataSet.setCircleColor(NSUIColor.orange)
// dataSet.circleColors = [NSUIColor.brown]  // 另種設定顏色
// 設定在 5 才開始有空心效果
dataSet.circleRadius = 5
dataSet.circleHoleColor = NSUIColor.clear
// 標亮顏色
dataSet.highlightColor = NSUIColor.blue
// 折線顏色
let customColor = #colorLiteral(red: 0.7411764706, green: 0.7411764706, blue: 0.7411764706, alpha: 1).cgColor
dataSet.setColor(NSUIColor(cgColor: customColor))

label 就是放在表格下方，告訴使用者現在呈現的是什麼資料，但我們這邊重點還是先放在顏色。

折線上顏色 — 點、標亮文字

而在 dataSet.drewCirclesEnabled 為 true 下（預設為 true），setCircleColor 就是每個 (x, y) 點的顏色，用 circleRadius 設定這個圓點的大小，如果要呈現空心的效果，必須在半徑大於 5 才有效果，不然都是實心（這部份與 layer.cornerRadius 相當相似，iOS 畫不出更小的效果）。

highlightColor 是移到該點後會出現的十字，告訴你目前正在看的資料位置，如下：

圖 1 是設定為藍色，圖 2 預設顏色為淡橘色，圖 3 為點選後沒有顏色標亮。要呈現圖 3 的效果，也可以設定 dataSet.highlightEnabled = false，預設為 true，除此之外，我們也可以分別設定是否只要垂直標亮或水平標亮，而兩者預設也是 true，設定如下：

dataSet.drawVerticalHighlightIndicatorEnabled = false
dataSet.drawHorizontalHighlightIndicatorEnabled = false

分別設定 false 會得到如下結果：

而在 highlightEnabled 為 true 下，我們也可以設定標亮的細節，如下：

dataSet.highlightEnabled = true
dataSet.highlightLineWidth = CGFloat(3.0)
dataSet.highlightLineDashLengths = [CGFloat(5.0), CGFloat(15.0), CGFloat(10.0)]

標亮的線寬，以及這條線如何去呈現虛線效果，在highlightLineDashLengths 中，設定了分散程度為 5、15、10，最終如下：

它是將你的線段切成 5、15、10 的大小，同時間距也是 5、15、10 這樣隨機地排列，而 LineDashLengths 型別是 [CGFloat]，如果裡面都是 5，如 5、5、5，不如只設定一個 5，得到的是一樣的效果。

折線上顏色 — 折線本身

再來是設定折線的顏色，這邊雖然 dataSet.setColor(NSUIColor(cgColor: customColor))，但其實 NSUIColor 就是 UIColor 的別名，看到如下：

在 iOS 中，我們有幾種常見的 Color 型別，UIColor、CGColor、CIColor，UIColor 就是 UIKit 下的型別，CGColor 就是 Core Graphics 下的型別，CIColor 則是 CIImage 下的型別。

所以 setColor 只要帶入 UIColor 即可。

如果你想要折線的顏色更好看一點，這邊可以設定漸層，我們先從 dataSet.setColors(NSUIColor.black, NSUIColor.red) 開始，如下：

此時折線呈現黑紅相間，我們接著設定如下：

        dataSet.isDrawLineWithGradientEnabled = true
        dataSet.setColors(NSUIColor.yellow, NSUIColor.red)
        dataSet.gradientPositions = [CGFloat(20.0), CGFloat(80.0)]

畫線有漸層設定為 true，預設為 false，接著將顏色改成黃跟紅，漸層位置從 20 到 80，接著再將漸層位置設為 [CGFloat(20.0), CGFloat(80.0)].reversed()，結果如下：

跟 label 擺在一起的方塊，黃色跟紅色順序沒變，但漸層原先看起來以黃色為主，變成以紅色為主了。當然，我們也可設定三種顏色的漸層，如下：

        dataSet.isDrawLineWithGradientEnabled = true
        dataSet.setColors(NSUIColor.yellow, NSUIColor.red, NSUIColor.black)
        dataSet.gradientPositions = [CGFloat(20.0), CGFloat(30.0), CGFloat(40.0)]

當 isDrawLineWithGradientEnabled 設為 true 時，記得一定要設定 gradientPositions，否則會報錯。不過無論是兩種顏色的漸層，或三種顏色的漸層，label 旁邊的色格其實沒什麼用處，因為在數據的讀取上並無意義。

為了修正這個無意義，我們先往前進兩步，設定 lineChartView 如下：

lineChartView.legend.form = .none
或
lineChartView.legend.form = .empty

設定 .none、.empty 取消顯示色格看起來沒有不同，不過 DGCharts 裡告訴我們 .empty 雖然沒畫格狀，但留下空白。

在折線本身，我們也可透過設定 dataSet.lineDashLengths = [CGFloat(1.0), CGFloat(3.0), CGFloat(5.0)]，來達到虛線的效果，如下：

此外，我們也可設定折線的模式，分為 .linear (預設)、.cubicBezier、.horizontalBezier、.stepped，結果如下：

折線附近顏色 — 數據

再回頭看到折線的點旁，數據的顏色設定如下：

        dataSet.valueLabelAngle = CGFloat(45.0)
        dataSet.valueTextColor = NSUIColor.magenta

將數據顏色設為品紅，而角度分別為 45、90、180 的結果。你也可以設定多種顏色及它的字體，如下：

        dataSet.valueLabelAngle = CGFloat(90.0)
        dataSet.valueColors = [NSUIColor.red, NSUIColor.brown, NSUIColor.green]
        dataSet.valueFont = UIFont.systemFont(ofSize: 10)

而這項設定其實也可以往前進一步，用 chartData.setValueTextColor(NSUIColor.systemBlue)，得到如下：

折線外顏色 — 邊框

我們可以這樣設定邊框顏色，如下：

lineChartView.drawBordersEnabled = true
lineChartView.borderColor = .green
lineChartView.borderLineWidth = 10

必須在 drawBordersEnabled 為 true 時，DGCharts 才會幫你畫出邊框。

折線外顏色 — 背景

接著可以這樣設定背景，如下：

lineChartView.drawGridBackgroundEnabled = true
lineChartView.backgroundColor = #colorLiteral(red: 0.5450980392, green: 0.7294117647, blue: 0.8078431373, alpha: 1).withAlphaComponent(0.3)
lineChartView.gridBackgroundColor = #colorLiteral(red: 0.5450980392, green: 0.7294117647, blue: 0.8078431373, alpha: 1).withAlphaComponent(0.3)

背景是大範圍的，表格背景是小範圍的，由於兩個顏色一樣，但透明度不同，所以可以看到如下：