iOS Swift Charts 折線圖 圖表

Charts

Cheryl 2020/02/19 14:47:34
275
一、前言
 
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 提供多種安裝方式,包含 CocoaPodsCarthage 或是手動匯入都可以,請選擇一種自己習慣的方式即可。
 
 
三、建立折線圖
 
打開  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)

 

 

 

五、結語

在 GitHub 網站擁有 22.3k 星星數的 Charts,不僅使用上簡單易懂,在開發上更是有效率,

遇到困難時也有非常龐大的社群及開發者分享解法,即使是初學者也能快速上手,輕鬆建立一個專業又漂亮的圖表!

 

 

六、參考連結

Charts: https://github.com/danielgindi/Charts

Daniel Cohen Gindi: https://github.com/danielgindi

 

Cheryl