iOS Swift Charts 折線圖圖表

Charts

Cheryl 2020/02/19 14:47:34

2 1864

一、前言

Charts 是由 Daniel Cohen Gindi 開發的函示庫，目前支援 iOS 8.0 以上、tvOS 9.0 以上、macOS 10.11 以上版本。我們可以透過它輕鬆地實現 8 種圖表，包含長條圖(Bar Chart)、圓餅圖(Pie Chart)、散佈圖(Scatter Chart)、K 線圖(Candle Stick Chart)、氣泡圖(Bubble Chart)、雷達圖(Radar Chart)和本文即將討論的折線圖(Line Chart)。

二、如何安裝

Charts 提供多種安裝方式，包含 CocoaPods、Carthage 或是手動匯入都可以，請選擇一種自己習慣的方式即可。

三、建立折線圖

打開 ViewController .swift 檔案，使用 import 語法將 Charts 匯入專案。

import Charts

打開 .storyboard 或 .xib 檔案，拖曳一個視圖(View)到畫面上後，為它加入合適的約束(Constraints)，

完成後，選取該視圖，並打開右邊欄的識別檢閱器(Identity Inspector)，在類別(Class)的欄位選取 LineChartView。

接著，打開助理編輯器(Assistant Editor)，將視圖拖曳至 ViewController 類別裡，並將它命名為 chart。

@IBOutlet weak var chart: LineChartView!

到這個步驟，我們已經成功建立一個折線圖的物件了！

四、配置折線圖

接下來，我們將以下圖為目標，配置一個客製化的折線圖。

建立折線

// 建立 ChartDataEntry
let points = [30.65, 30.68, 30.61, 30.62, 30.60, 30.68, 30.60, 30.69, 30.57, 30.55]
let entries: [ChartDataEntry] = points.enumerated().map {
    return ChartDataEntry.init(x: Double($0), y: Double($1))
}
        
// 建立 LineChartDataSet
let set = LineChartDataSet.init(entries: entries, label: "即期買進")
        
// 設定 chart.data
let data = LineChartData(dataSets: [set])
chart.data = data

設定折線樣式

set.drawCirclesEnabled = false  // 隱藏轉折點
set.drawValuesEnabled = false   // 隱藏轉折點資訊
set.lineWidth = 1.5             // 設定折線寬度
set.setColor(honeyYellow)       // 設定折線顏色

建立裝飾圓點

let lastEntry = entries.last ?? ChartDataEntry.init(x: 0, y: 0)
let dotSet = LineChartDataSet.init(entries: [lastEntry], label: "即期買進")
dotSet.circleHoleColor = honeyYellow    // 設定內圓顏色
dotSet.circleHoleRadius = 3             // 設定內圓半徑
dotSet.drawValuesEnabled = false        // 隱藏轉折點資訊
dotSet.setCircleColor(.clear)           // 設定外圓顏色
set.setColor(honeyYellow)               // 設定折線顏色

let data = LineChartData(dataSets: [set, dotSet])
chart.data = data

設定說明圖例

let legend = chart.legend
legend.enabled = false  // 隱藏說明圖例

設定 X 軸

let xAxis = chart.xAxis
xAxis.axisLineColor = cloudyGray    // 設定X軸顏色
xAxis.drawGridLinesEnabled = false  // 隱藏隔線
xAxis.labelPosition = .bottom       // 設定文字位置
xAxis.spaceMin = 0.5                // X軸左邊間隔距離
xAxis.spaceMax = 0.5                // X軸右邊間隔距離

// 設定X軸文字
var xValues: [String] = []
for i in 0..<entries.count {
    let date = Calendar.current.date(byAdding: .day, value: i, to: Date()) ?? Date()
    xValues.append(date.toMMddString())
}
xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues)

建立另一條折線

let points2 = [30.66, 30.70, 30.63, 30.64, 30.62, 30.70, 30.65, 30.73, 30.60, 30.57]
let entries2: [ChartDataEntry] = points2.enumerated().map {
    return ChartDataEntry.init(x: Double($0), y: Double($1))
}

let set2 = LineChartDataSet.init(entries: entries2, label: "即期賣出")
set2.drawCirclesEnabled = false  // 隱藏轉折點
set2.drawValuesEnabled = false   // 隱藏轉折點資訊
set2.lineWidth = 1.5             // 設定折線寬度
set2.setColor(honeyYellow)       // 設定折線顏色

let lastEntry2 = entries2.last ?? ChartDataEntry.init(x: 0, y: 0)
let dotSet2 = LineChartDataSet.init(entries: [lastEntry2], label: "即期賣出")
dotSet2.circleHoleColor = shamrockGreen  // 設定內圓顏色
dotSet2.circleHoleRadius = 3             // 設定內圓半徑
dotSet2.drawValuesEnabled = false        // 隱藏轉折點資訊
dotSet2.setCircleColor(.clear)           // 設定外圓顏色
set2.setColor(shamrockGreen)             // 設定折線顏色

let data = LineChartData(dataSets: [set, dotSet, set2, dotSet2])
chart.data = data

設定右邊軸線的樣式

let rightAxis = chart.rightAxis
rightAxis.enabled = false  // 隱藏右邊軸線

設定 Y 軸

let leftAxis = chart.leftAxis
leftAxis.axisLineColor = cloudyGray // 設定Y軸顏色
leftAxis.gridColor = cloudyGray     // 設定隔線顏色

leftAxis.axisMaximum = 30.8         // 設定Y軸的最大值
leftAxis.axisMinimum = 30.5         // 設定Y軸的最小值
leftAxis.labelCount = 3             // 設定Y軸的文字數量

let formatter = NumberFormatter()
formatter.maximumFractionDigits = 1 // 設定小數點後最多顯示幾位
formatter.minimumFractionDigits = 1 // 設定小數點後最少顯示幾位
leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: formatter)