(Swift) Charts 折線圖 進階操作

目的：學習 LineChartView 細部的操作

• 隱藏背景的格線
• 隱藏表格中的數值
• 彎曲折線與縮小
• 取消點擊與縮放事件
• 填充折線背景
• 線與標籤顏色不同步
• 給定出不同的數值，給予不同的文字顏色

環境：OSX 13.2 + Xcode 11.3 + Charts 4.1.0

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

(Swift) 學習使用 Charts 產生 直方圖、折線圖、圓餅圖

隱藏背景的格線

    @IBOutlet weak var myView: LineChartView!


    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: LineChartView!

    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: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        ....


        // 產生 BarChartDateSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

        // 每個數值上的圓半徑數值
        DataSet.circleRadius = 0
        
        // 折線會採用 水平貝塞爾曲線進行平滑處理
        DataSet.mode = .horizontalBezier
        
        // 加粗曲線
        DataSet.lineWidth = 5

取消點擊與縮放事件

@IBOutlet weak var myView: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        ....

        // 產生 BarChartDateSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

        // 關閉點擊後的十字線
        DataSet.highlightEnabled = false
        

        // 關閉 x 軸縮放
        myView.scaleXEnabled = false
        // 關閉 y 軸縮放
        myView.scaleYEnabled = false
        // 關閉雙擊縮放
        myView.doubleTapToZoomEnabled = false

填充折線背景

@IBOutlet weak var myView: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        ....

        // 產生 BarChartDateSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

        ...

        //開啟填充色繪製
        DataSet.drawFilledEnabled = true
        //設置填充色
        DataSet.fillColor = .blue
        //設置填充色透明度
        DataSet.fillAlpha = 1
        
        // 漸變顏色數組
        let gradientColors = [UIColor.blue.cgColor, UIColor.white.cgColor] as CFArray
        // 每組顏色所在位置（範圍0~1)
        let colorLocations:[CGFloat] = [1.0, 0.0]
        // 生成漸變色
        let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: gradientColors, locations: colorLocations)
        //將漸變色作為填充對象
        DataSet.fill = LinearGradientFill(gradient: gradient!, angle: 90.0)

以上就是大部分的折線圖的細部操作，雖然說最近 ChatGPT 很火紅，但是有些細部的操作，可能會因你套件版本的不同，得到的答案也會有所差異

GitHub

GitHub - jasonyen1009/Chart

參考資料

Swift - 第三方图表库Charts使用详解3（折线图2：线条、拐点的样式设置）_不秃就雪白的男人的博客-CSDN博客_怎样设置线条样式 chart

線與標籤顏色不同步

我發現有時候改變了線的顏色，但是下方的標籤顏色不會同步，這時必須先將其它設置都 註解後 執行程式，最後再次更新 線的顏色即可解決 線與標籤顏色不同的問題

func setChart(dataPoints: [String], values: [Double]) {
        ...
        
        // 產生 LineChartDateSet
        let dataSet = LineChartDataSet(entries: dataEntry, label: "temperature")
        dataSet.colors = [.red]

        ...