上篇文章中，我們了解了走勢圖k線圖繪制及的一些關鍵點，基于大家都懂期貨股票這些東西的基礎上去講解的，說的也不夠全面，這篇文章我們以實戰(zhàn)為主，一步一步寫出可以商業(yè)化的k線圖。

一、什么是k線圖？

1.k線圖：有最新價、收盤價、開盤價、最高價、最低價、均價、賣量、買量等等。而我們需要展示給用戶看的第一眼就是把它們全部繪制為k線圖，直觀。還有部分要轉化為數(shù)值直接推動；

蠟燭：需要用到收盤價、開盤價、最高價、最低價；紅色是漲（國內），開盤價在上，收盤價在下；綠色是相反的；

這是一張沒有背景圖片的蠟燭圖  蠟燭demo的實現(xiàn)！ 通過這篇文章，你可以繪制出商業(yè)用的各種組合走勢圖。。

均線：需要用到均價；5均線：比如有100個數(shù)據(jù)，5均線就是在第4點的時候拿到0-4的平均數(shù)繪制在第4點的位置，類推； 還有10 20 30均線等；

分時圖閃電圖：現(xiàn)價；

買量賣量持倉量：下面的那些柱子。

二：需求

1.畫一條分時圖，具有拉動效果；十字光標，十字光標出現(xiàn)的時候數(shù)值的軸對應的分時圖數(shù)據(jù)要顯示在上方的詳情框里（聯(lián)動）；縮放效果；橫屏效果；（閃電圖 分時圖 均線都是這樣做）

2.畫k線圖，也就是蠟燭圖；具有拉動效果；十字光標，十字光標出現(xiàn)的時候要把對應蠟燭的數(shù)據(jù)展現(xiàn)在詳情款里面（聯(lián)動）;縮放；橫屏；（買量買量持倉量圖可以參考這個）

三：分析需求

1.基本圖；

2.拉動效果；

3.十字光標，聯(lián)動數(shù)據(jù)(展示對應的蠟燭 分時)；

4.縮放效果；

5.橫屏效果；

6.如果還有什么效果可以做的？；

四：確定框架及API

1.我們的數(shù)據(jù)是以json數(shù)組形式推送過來的。所以我們要有一個數(shù)據(jù)類，數(shù)據(jù)轉model類，然后用這個model去和繪圖類做交互及展示; 當然商業(yè)用的不單單那么簡單，至少你還得加個統(tǒng)計類統(tǒng)計每分鐘的變化趨勢添加到這個model類里面轉化成為可用model，也就是60s內的直接替換最后一個蠟燭圖，60s過了，這個要把它加入這個蠟燭數(shù)據(jù)（也就是新增一個蠟燭）這里可以匹配每組數(shù)據(jù)推送過來的時間和數(shù)組的最后一個元素的時間差是否大于60s；后臺推送過來的數(shù)據(jù)都是那邊已經(jīng)統(tǒng)計好的每分鐘數(shù)據(jù)；

我們這邊還有一個1 3 5 10 15 30 60 90 120分鐘的k線圖 這些k線圖就是要用這分鐘數(shù)組去計算得出對應的數(shù)組model；

2.API: 

數(shù)據(jù)類：請求數(shù)據(jù)的類，緩存數(shù)據(jù)或者網(wǎng)絡數(shù)據(jù)；用delegate，當model類被釋放數(shù)據(jù)還沒落地的時候也可以及時釋放這個model類。

model類：填入一個合約名稱提交事務，把合約名稱交給數(shù)據(jù)類去獲取數(shù)據(jù)，把獲取完成的數(shù)據(jù)驗證解析后轉化為模型數(shù)組通過block遞交對應的請求類（比如給統(tǒng)計類（相當于MVVM的VM））

繪圖類：

demo沒有統(tǒng)計類，所以我們直接在vc里面把這些數(shù)據(jù)通過代理給繪圖類；此時我們的k線圖可以說是死k，不會有跳動效果；(我們的跳動效果在上文也有解析到，就是通過TCP推送的數(shù)據(jù)去替換或者新增蠟燭圖,優(yōu)化看后文)

             到了這個繪圖類；本文以k線圖為主，不考慮分時圖閃電圖均線；k線圖我們需要外界提供數(shù)據(jù)，這時候我們需要用到代理；我們需要向外界獲取顯示的個數(shù)、還有目前顯示的范圍；也需要告訴外界這個視圖即將刷新、以及這個十字光標滑動的時候這個y軸對應model是什么；所以現(xiàn)在我們需要給每一個繪圖類做動作規(guī)范的PRotocol為：

現(xiàn)在基礎的和外界交互的API已經(jīng)確定下來了；我們可以開始繪圖了！

五、繪圖

我們新建一個KLineView繼承于UIView（這樣做縮放滑動等效果可以直接操作所以不繼承CAShapeLayer）；由上圖我們可以知道我們這個繪圖的搭配是CAShapelayer配合UIBezierPath；原因、優(yōu)化的原理和一些關鍵點看上一篇文章;

我們定義這個類專屬的和外界交互的動作(并不定義改變類變動的動作);

定義好這些對外操作后，我們開始實現(xiàn)邏輯。

我們先定義好每一個蠟燭圖的寬度 間隔 和每一次的偏移量

2:建立私有屬性(相對私有)記錄好每一個數(shù)據(jù) 顏色 控件

3.初始化這些屬性

- (void)reload:

獲取展示數(shù)據(jù)的最大值 刷新展示框的width、heighe

重新設置縮放比例x_scale

計算能容納多少個蠟燭count

//計算現(xiàn)在是從哪一個下標開始取 總個數(shù)減去顯示的個數(shù)

NSInteger index = self.ShowArrayMaxCount - _count;

self.OffsetIndex = index;//初始化偏移位置

因為插入圖片之后變得非常卡沒法打字 所以不插入代碼了 我會把代碼放在GitHub里面; 大家可以提交優(yōu)化版本!

方法介紹（包含以上除了橫屏外的所有效果實現(xiàn)）

- (void)offset_xPoint方法:

如果point.x >0 減去偏移量 顯示之前的數(shù)據(jù) 為0的時候顯示self.OffsetIndex開始的數(shù)據(jù) 否則顯示之后的數(shù)據(jù)。

- (void)CalculationHeightAndLowerFromArray:(NSArray:) ;

//遍歷獲取顯示數(shù)據(jù)的最高最低值

- (void)CalculationH;

//計算self.h每個點代表的值是多少

- (void)CalculationShowPointFromLastPrices:(NSArray <KlineModel *>*)array

//繪制所有蠟燭圖通過代理獲取到的model數(shù)據(jù)的蠟燭圖

- (void)replacementLastPoint:(KlineModel *)model

//替換最后一個點 邏輯是刪除self.ShapeLayer的最后一個視圖 再通過model生成這個位置對應的蠟燭圖 添加到父layer

- (CAShapeLayer *)GetShapeLayerFromModel:(KlineModel *)model Index:(NSInteger)idx

//通過model和對應下標生成蠟燭圖 添加到父視圖中 

- (void)offset_xPoint:(CGPoint)point

//滑動效果 改變OffsetIndex的值 刷新數(shù)據(jù)

- (void)pinchAction:(UipinchGestureRecognizer *)pinch

//縮放效果 改變x_scale的值 刷新數(shù)據(jù)

- (void)panGesture:(UIPanGestureRecognizer *)pan

//通過self.isShowTrackingCross判斷是否顯示十字光標  否則拉動新的數(shù)據(jù)

- (void)TrackingCrossFromPoint:(CGPoint)point

//十字光標  通過point逆推得出index 現(xiàn)在的下標/(單元大小)*縮放量

//獲取point.x坐標 和這個model的最新價或者其它價格對應的y  這里展示最新價

//把model通過@selector(TrackingCrossIndexModel:IndexPoint:)傳遞給外界 繪制當前路徑

- (void)setShowTrackingCross:(BOOL)ShowTrackingCross

重寫set方法判斷是否隱藏十字光標

橫屏效果

在監(jiān)控到屏幕轉動的時候重新設置frame 調用reload就好了。 里面暫時沒做任何處理.

其它細節(jié)請參考理論篇 請找茬 共同進步！！

demo鏈接：https://github.com/454961172/KlineDemo

原文鏈接：http://www.jianshu.com/p/f37ab1e73006

作者：不留名的黃子嘉