透過Charts建立圖表,美得讓你嫑嫑

沒錯!這次要來教大家的就是iOS Charts, 如果之前有研究過圖表製作的相信一定不陌生,因為這個是從Android上面轉移過來,也支援swift的版本,也就是下列的github.

英文好的同學,也可以參考下列這篇medium文章,寫得很好很仔細,不過當中有一些寫法我現在還不懂而已….還未夠班呀~

前面的步驟我就先跳過了,請使用CocoaPods加入下列程式碼,來安裝這個三方的套件

pod ‘Charts’, ‘~> 3.0.1’

這次要教大家完成的效果大概就是像這樣,透過直條圖顯示每個月的氣溫。

當然裡面的資料是假的,也可以透過JSON從Weather API取得資料來顯示,而這個也是我現在要做的XD

透過CocoaPods安裝完套件之後,記得把Xcode關閉,然後開啟.xcworkspace的檔案,開啟之後,先到Main.storyboard, 拉入一個view元件,填滿整個螢幕,然後將其設定的類別設定為”BarChartView”,設定好之後將其與程式碼進行連結,產生一個叫做myView的outlet連線。

完成之後,請先實作我們所需的假資料,一個是12個月份的字串,另外一個則是氣溫。

@IBOutlet weak var myView: BarChartView!
var monthArray = [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”]
var temperatureArray:[Double] = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ,30, 31, 32]

陣列生好之後,我打算透過一個方法updateChartsData來更新我們圖表的資料內容,因此請實作一個下列的程式碼內容

func updateChartsData() {
//生成一個存放資料的陣列,型別是BarChartDataEntry.
var dataEntries: [BarChartDataEntry] = []

//實作一個迴圈,來存入每筆顯示的資料內容
for i in 0..<monthArray.count {
//需設定x, y座標分別需顯示什麼東西
let dataEntry = BarChartDataEntry(x:Double(i), y:temperatureArray[i])
//最後把每次生成的dataEntry存入到dataEntries當中
dataEntries.append(dataEntry)
}
//透過BarChartDataSet設定我們要顯示的資料為何,以及圖表下方的label
let chartDataSet = BarChartDataSet(values: dataEntries, label: “Temperature per month”)
//把整個dataset轉換成可以顯示的BarChartData
let charData = BarChartData(dataSet: chartDataSet)
//最後在指定剛剛連結的myView要顯示的資料為charData
myView.data = charData
}

接著實際去跑這個專案,你會發現我們所設定的資料已經可以順利顯示到螢幕上了,可是有沒有發現哪裡怪怪,對的!!我們的月份沒有順利顯示出來,那我們當初打那麼辛苦要幹嘛….

透過BarChartDataEntry來實作x.y資料的時候,僅可以顯示Double的資料內容,如果想要顯示字串,請透過下列這個方法~~

新建一個變數叫做axisFormatDelegate,型別是IAxisValueFormatter?

var axisFormatDelgate: IAxisValueFormatter?

最後在updateChartsData的方法最後,加入下列兩行

主要的意思是,將x方向的格式修改成我們設定的變數,然後加一個granularity使其對齊

myView.xAxis.valueFormatter = IndexAxisValueFormatter(values: monthArray)
myView.xAxis.granularity = 1

最後再來執行專案,就可以看到美美的長條圖出現囉~~其實還有很多地方可以再做優化,但是看到自己的努力終於成功顯示就是開心啊!!

github連結在下跟大家分享,有問題請留言囉~