Swift:駕馭水噹噹的 Charts!

玫瑰是美的,不過我們認為,使它更美的是它包含的香味。 — — 莎士比亞

偉大的 Daniel Cohen Gindi 在創造這個稱作為 charts 的open source時,詮釋了這句話所說的「美不單單只是外在的光彩,更豐富的是程式碼延伸心頭」,charts 就是這麼的簡單,只要加幾行程式碼,就能擁有可運作又可互動的圖表。

在這個章節,要教大家製作基本的 BarCharts,谷歌大神 charts 時,首先都會看到 Appcoda 的這篇文章,但有些地方會出現 error,這裡跟大家分享最新的程式碼!

  1. 開一個新專案

2. 使用 Terminal ,指定到你 Xcode 的資料夾,並做 pod init ,添加 Podfile ,接下來我們將使用 CocoaPods 來安裝函式庫(我個人認為比手動添加專案容易上手)。

3. 打開 Podfile 後,打上「pod ‘Charts’」,接著回到Terminal,開始 pod install ,CocoaPods就會幫你安裝這個函數庫了,並且會在資料夾看到一個稱為 .xcworkspace 的檔案,先把你的 .xcodeproj 關起來,然後開啟這個 .xcworkspace ,接下來你都會使用這個檔案開發!

4. 很重要的步驟,先按快捷鍵 command+B(或 Product > Build)來編譯專案,不然就會無法 import Charts,編譯完成之後,在我們的 ViewController 裡面 import Charts 。

5. 在 Main.storyboard 拉一個 View 大小不拘,並且把這個 View 的 Class 設為 BarChartView。

6. 加入 outlet 到 ViewController ,並加上我們需要的元素。

@IBOutlet weak var myView: BarChartView!
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]

7. 設立一個 function,處理我們所有需要的資料,補充部分有些客製化的呈現喔!

func setChart(dataPoints: [String], values: [Double]) {

//若沒有資料,顯示的文字
myView.noDataText = "You need to provide data for the chart."

//存放資料的陣列,型別是BarChartDataEntry.
var dataEntries: [BarChartDataEntry] = []

//迴圈,來載入每筆資料內容
for i in 0..<dataPoints.count {
//設定X.Y座標分別顯示的東西
let dataEntry = BarChartDataEntry(x: Double(i), y: unitsSold[i])
//把個別的dataEntry的資料,儲存至dataEntries中
dataEntries.append(dataEntry)
}

//顯示的資料之內容與名稱(左下角所顯示的)
let chartDataSet = BarChartDataSet(values: dataEntries, label: "Units Sold")
//把dataSet轉換成可顯示的BarChartData
let chartData = BarChartData(dataSet: chartDataSet)
//指定剛剛連結的myView要顯示的資料為charData
myView.data = chartData



////// 從這裡開始是補充的部分 /////

//改變chartDataSet的顏色,此為橘色
//chartDataSet.colors = [UIColor(red: 230/255, green: 126/255, blue: 34/255, alpha: 1)]

//改變chartDataSet為彩色
chartDataSet.colors = ChartColorTemplates.colorful()

//標籤換到下方
myView.xAxis.labelPosition = .bottom

//改變barChartView的背景顏色
myView.backgroundColor = UIColor(red: 189/255, green: 195/255, blue: 199/255, alpha: 1)

//一個一個延遲顯現的特效
myView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)

//彈一下特效
myView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInBounce)

//設立界線
let limit = ChartLimitLine(limit: 10.0, label: "Target")
myView.rightAxis.addLimitLine(limit)

///// 補充到此 /////



}

8. 在 viewdidload 裡面放上這行 code ,執行上面的 function 。

setChart(dataPoints: months, values: unitsSold)

歡迎到 Github連結 下載完整 Project


我是鬥志創業家兼 iOS菜鳥工程師 Sunny,想了解更多請到我的網站
若有任何問題或建議,歡迎留言,或寄信至 sunnylee945@hotmail.com。
# 隨手給愛心❤ # FollowGithub
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.