也是最近1個月在項目中不斷研究coreplot實作柱狀圖的效果。
先來看一下air quality的柱狀圖效果:
經過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的建構:
二級頁子產品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中詳細講解。