天天看點

用CorePlot實作類似Air Quality的柱狀圖滾動效果(1/2)

也是最近1個月在項目中不斷研究coreplot實作柱狀圖的效果。

先來看一下air quality的柱狀圖效果:

用CorePlot實作類似Air Quality的柱狀圖滾動效果(1/2)

經過1個月的研究,現在基本上已經重制了這個柱狀圖的功能(99%),而且還加上了重新整理資料的功能。

計劃通過兩篇blog來記錄下開發中的難點,在後一篇blog中會把所有的源碼挂上去。

難點有以下幾個:

1. coreplot自帶的滾動機制在我這邊做起來有一些卡頓,使用者體驗很不好,這裡需要替換掉它自帶的滾動功能

2. 不用coreplot的滾動以後,需要建立一個view用于承載左側固定的坐标軸

3. 滾動是高亮的柱子的選擇以及設定高亮标簽

4. 頂端時間的顯示

5. 資料重新整理功能

如果不清楚如何用swift添加coreplot,參見我之前的這篇blog:http://blog.csdn.net/u011156012/article/details/44061411

本篇blog首先講解下前兩個問題。進入正題:

先上一下storyboard的建構:

用CorePlot實作類似Air Quality的柱狀圖滾動效果(1/2)
用CorePlot實作類似Air Quality的柱狀圖滾動效果(1/2)

二級頁子產品bg是一個背景的imageview;label就是中間上部的标題label;line1px是美工切出來的1個px的分割線,放在label下面;然後scrollview用來承載我們的coreplot,可以看到裡面還是放了一個我們的graph hosting view;最後的view是用來承載左側的坐标系。

接下來看如何在scrollview中搭建hosting view

這裡我用一個函數initplotgraphview來把所有的代碼寫進去,因為這部分代碼确實有點長。

我基本上加上了足夠多的注釋。有一些特别重要的部分單獨拿出來強調以下。

正常情況下,我們的graphview的長度肯定會大于scrollview的長度的,因為資料足夠多的話,這個長度一定是夠的;當然一定會出現特殊的情況,比如我們不斷向左邊劃屏,重新整理曆史的資料,總會遇到曆史資料重新整理過來隻有幾條或者十幾條的情況,這樣整個scrollview的contentsize的width就會太小,而導緻scrollview不能滑動了,是以這裡面如果graphview的width小于螢幕的寬度,就要把它+1,這樣確定scrollview中的數目不多的情況下依舊可以滑屏。

這裡補充以下前提:因為coreplot的資料是畫上去的,在我們不适用它自帶的滑屏效果後,我們需要把所有的柱子都畫到scrollview裡面,這樣會占用不小的記憶體,實際測試中,畫上600個柱子大概要消耗20m左右的記憶體,是以我們要采用滾動重新整理的機制,確定每個scrollview中的柱子數目不能太多。項目中我使用的門檻值是120個。

接下來設定bar plot

這裡其實把每個柱子的邊線寬度設定成了0.1,因為開始設定成0了以後,或者把thebarplot.linestyle  =nil ,會有一種情況,就是我們傳回來的資料是0.x,就是大于0但是小于1時,柱子會不顯示出來,是以這把邊界設定成0.1可以保證當傳進來的數字大于0小于1時也能夠顯示出來一個很小的線。

這裡關于plotspace的x和y range我弄成了1:1的關系,就是把所有的内容都顯示出來,在注釋裡面也些了,如果要使plotspace滾動的話,xrange的長度應該是1/4或者1/8,意思就是分幾個螢幕來顯示所有的資料。

接下來繪制x軸和y軸

關于自定義的x軸label的顯示我們放到下一個blog去介紹,這裡面先暫時不多介紹。

這樣整個initplotgraphview就完成了,當然函數的最後選中特定的bar以及高亮的offset的用法我們都在下一個blog中介紹。

接下來顯示左側的縱軸的刻度是個很簡單的函數,因為我們在之前把y軸設定了消失的動作,是以這裡面的y軸其實就是我們手動設定上去的幾個label

這裡面把傳進來的最大值做相關的計算并且顯示在label上。

基本上前兩個難點就解決了。基本上我們已經搭建好了大的架構,下來的工作就是具體解決一些細節的東西,這裡我們放到下一篇blog中詳細講解。