中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

一、準(zhǔn)備材料

文本框：

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

日期：

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

框線：

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

十字坐標(biāo)線：

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

數(shù)值標(biāo)簽：

價(jià)格值標(biāo)簽(左邊標(biāo)簽)，顯示鼠標(biāo)指針處的價(jià)格數(shù)值，默認(rèn)隱藏。

時(shí)間值標(biāo)簽(下方標(biāo)簽)，顯示鼠標(biāo)指針處的時(shí)間數(shù)值，默認(rèn)隱藏。

K線彈窗：

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

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

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

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

中繼器表格：

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

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

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

二、制作交互

1. k線顏色

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

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

具體交互如下：

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

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

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

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

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

這里我們需要用移動(dòng)事件來做。

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

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

鼠標(biāo)移入k線時(shí)十字坐標(biāo)的位置總共有3個(gè)事件：

鼠標(biāo)移入k線時(shí)：顯示十字坐標(biāo)。

鼠標(biāo)移出k線時(shí)：隱藏十字坐標(biāo)。

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

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

鼠標(biāo)移入k線時(shí)：顯示兩個(gè)標(biāo)簽。

鼠標(biāo)移出k線時(shí)：隱藏兩個(gè)標(biāo)簽。

鼠標(biāo)在k線圖中移動(dòng)時(shí)：

• 對于價(jià)格值標(biāo)簽（左邊標(biāo)簽），他是x坐標(biāo)保持不變，移動(dòng)y的坐標(biāo)=鼠標(biāo)的y坐標(biāo)值-價(jià)格值標(biāo)簽高度的一半；因?yàn)樯线吺謽?biāo)簽減了4，為了讓標(biāo)簽中部對齊十字標(biāo)簽，所以還要減4。
• 對于時(shí)間值標(biāo)簽（下方標(biāo)簽），他y坐標(biāo)保持不變，移動(dòng)x的坐標(biāo)=鼠標(biāo)的x坐標(biāo)值-時(shí)間值標(biāo)簽寬度的一半；因?yàn)樯线吺謽?biāo)簽減了4，為了讓標(biāo)簽中部對齊十字標(biāo)簽，所以還要減4。

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

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

首先是時(shí)間標(biāo)簽比較簡單，不需要計(jì)算，因?yàn)楸砀窳衐ate就有記錄時(shí)間，我們直接讓時(shí)間值標(biāo)簽的文本=item=date即可。

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

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

鼠標(biāo)移入k線時(shí)：顯示k線彈窗

鼠標(biāo)移出k線時(shí)：隱藏k線彈窗

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

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

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

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

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

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