編輯導(dǎo)語：股票等金融行業(yè)經(jīng)常會用到K線圖，一個清晰明了的K線圖可以讓我們直觀的看到交互效果，也能節(jié)省時間成本；本文作者分享了關(guān)于使用中繼器制作K線圖的教程，我們一起來學(xué)習一下。

K線圖應(yīng)用于股票、貴金屬、期貨等等的金融交易中，所以K線圖成了金融交易軟件必不可少的一個元件。

目前市面上的k線圖原型都是圖片，不能讓老板或者甲方爸爸更直觀的看到交互效果；所以作者出了這期教程，教你們?nèi)绾问褂弥欣^器來制作K線圖，這樣做的好處就是不用重復(fù)設(shè)置交互，只要修改中繼器表格里面的數(shù)據(jù)，系統(tǒng)就能自動畫出k線圖，這樣做省時省力，復(fù)用性高。

本期教程屬于高級課程，涉及比較多的函數(shù)，大家要認真學(xué)習哈。

如果喜歡的同學(xué)們關(guān)注一下作者，如果你們想學(xué)的話，后續(xù)會繼續(xù)出分時圖、成交量圖等制作教程。

原型預(yù)覽地址：https://mv8s2o.axshare.com/#id=fibury&p=k線圖&g=1

制作完成后的效果如下圖：

一、準備材料

文本框：

• 價格最大值（上圖中的3500），這兩個值需要手工填入，用于后續(xù)計算。
• 價格最小值（上圖中的2850），這兩個值需要手工填入，用于后續(xù)計算。

日期：

圖中2020/6/1、7/2、7/31、8/31，時間隨便輸入，多少個都可以，你們按實際需要。

框線：

由水平線和垂直線組合而成，組合名字外框，外框一是為了好看，二是后面這個外框的尺寸會用于計算。如下圖擺放即可：

十字坐標線：

由水平線和垂直線組合而成，放置在外框的中部，十字坐標的高度和歡度和框線一致，默認隱藏；十字坐標線的目的是為了鼠標移入k線圖時，顯示鼠標具體位置的數(shù)值。

數(shù)值標簽：

價格值標簽(左邊標簽)，顯示鼠標指針處的價格數(shù)值，默認隱藏。

時間值標簽(下方標簽)，顯示鼠標指針處的時間數(shù)值，默認隱藏。

K線彈窗：

彈窗是鼠標移入時可以看到具體的日期的k先數(shù)據(jù),默認隱藏，里面需要包含日期、開盤價、收盤價、最高價、最低價、漲幅、交易量的文本框。

中繼器內(nèi)材料：

矩形：用于計算開盤價和收盤價，默認紅色，選中是設(shè)置為綠色。

垂直線：用于計算最高價和最低價，默認紅色，選中是設(shè)置為綠色。

中繼器表格：

需要設(shè)置以下幾列：

• date：時間日期
• Opening_price：開盤價
• closing_price：收盤價
• max_price：最高價
• min_price：最低價
• volume：成交量
• rate：今日漲幅

溫馨提示：中繼器里面的數(shù)據(jù)可在excel中直接復(fù)制，然后中繼器布局記得選水平。

二、制作交互

1. k線顏色

首先我們要區(qū)分這只股票今天是紅色的還是綠色的，這個只需要比較開盤價和收盤價；如果開盤價大于收盤價，那就是綠色的，如果收盤價大于開盤價，那就是紅色的。

因為一開始我們已經(jīng)設(shè)置了中繼器內(nèi)矩形和垂直線選中時變成綠色，所以，我們只需要在中繼器每項加載時做判斷，如果開盤價大于收盤價，選中中繼器內(nèi)矩形和垂直線即可。

具體交互如下：

2. 設(shè)置k線尺寸

我們根據(jù)開盤價、收盤價、價格最大值（文本框）、價格最小值（文本框），外框高度，可以算出中繼器內(nèi)矩形的高度=|(收盤價-開盤價)|/(價格最大值-價格最小值)*外框的高度。

這里注意，因為當開盤價=收盤價的時候，在k線圖上不是沒有東西，而是一條橫線，所以最后結(jié)果我們統(tǒng)一+1。

同樣，我們根據(jù)最高價、最低價、價格最大值（文本框）、價格最小值（文本框），外框高度，可以算出中繼器內(nèi)垂直線的高度=(最高價-最低價)/(價格最大值-價格最小值)*外框的高度。

3. 設(shè)置k線位置

這里我們需要用移動事件來做。

首先中繼器內(nèi)矩形，x坐標保持原來不變，y坐標=(價格最大值-收盤價)/(價格最大值-價格最小值)*外框的高度。

中繼器內(nèi)垂直線，同樣x坐標保持原來不變，y坐標=(價格最大值-最高值)/(價格最大值-價格最小值)*外框高度。

鼠標移入k線時十字坐標的位置總共有3個事件：

鼠標移入k線時：顯示十字坐標。

鼠標移出k線時：隱藏十字坐標。

鼠標在k線圖中移動時：移動十字坐標讓他們跟隨鼠標，對于水平線而言，他是x坐標保持不變，移動y的坐標，理論上應(yīng)該是鼠標的y坐標值；不過如果是鼠標的y值，就會擋住k線圖，所以一般的處理是減一個數(shù)，案例中是減4；然后垂直線是y坐標保持不變，移動x的坐標=鼠標的x坐標值-4。

鼠標移入k線時數(shù)值標簽的位置同樣也是分3個事件完成：

鼠標移入k線時：顯示兩個標簽。

鼠標移出k線時：隱藏兩個標簽。

鼠標在k線圖中移動時：

• 對于價格值標簽（左邊標簽），他是x坐標保持不變，移動y的坐標=鼠標的y坐標值-價格值標簽高度的一半；因為上邊十字標簽減了4，為了讓標簽中部對齊十字標簽，所以還要減4。
• 對于時間值標簽（下方標簽），他y坐標保持不變，移動x的坐標=鼠標的x坐標值-時間值標簽寬度的一半；因為上邊十字標簽減了4，為了讓標簽中部對齊十字標簽，所以還要減4。

鼠標移入k線時數(shù)值標簽的文本：

確定標簽位置之后，我們還需要設(shè)置標簽的文本，這樣才可以鼠標移動到哪里就看哪里的數(shù)據(jù)。

首先是時間標簽比較簡單，不需要計算，因為表格列date就有記錄時間，我們直接讓時間值標簽的文本=item=date即可。

然后價格值標簽的文本就需要計算了，=最大值文本-(鼠標的y坐標值-外框的y值)/外框的高度*(最大值文本-最小值文本)，然后這里注意還要用tofixed函數(shù)進行四舍五入的運算。

鼠標移入k線時設(shè)置k線彈窗同樣是3個事件：

鼠標移入k線時：顯示k線彈窗

鼠標移出k線時：隱藏k線彈窗

鼠標在k線圖中移動時：我們需要設(shè)置k線彈窗里面的文本值：

• 日期=中繼器表格里的date；
• 開盤價=中繼器表格里的Opening_price；
• 收盤價=中繼器表格里的closing_price；
• 最高價=中繼器表格里的max_price；
• 最低價=中繼器表格里的min_price；
• 漲幅=中繼器表格里的rate（這里要注意一點的是，如果你中繼器里輸入的只是數(shù)字，那就要加上%，如果中繼器里輸入的本來就有%的就不需要了。）
• 交易量=中繼器表格里的volume，這里如果需要加單位的可以在后面補上單位。

那到這里就制作完成了，完成之后我們只需要在excel整理好數(shù)據(jù)，然后復(fù)制粘貼到中繼器表格，就完成了；以后每次使用基本上兩分鐘就完成一個圖，工作效率極高，而且還是高保真的。

最后如果你喜歡我的原型教程的話，記得關(guān)注一下哈，謝謝大家。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。