AXURE教程：中繼器制作K線圖K線圖應(yīng)用于股票、貴金屬、期貨等等的金融交易中，所以K線圖成了金融交易軟件必不可少的一個(gè)元件。目前市面上的k線圖原型都是圖片，不能讓老板或者甲方爸爸更直觀的看到交互效果；所以作者出了這期教程，教你們?nèi)绾问褂弥欣^器來(lá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ù)覽地址：/#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)隱藏，里面需要包含日期、開(kāi)盤價(jià)、收盤價(jià)、最高價(jià)、最低價(jià)、漲幅、交易量的文本框。中繼器內(nèi)材料：矩形：用于計(jì)算開(kāi)盤價(jià)和收盤價(jià)，默認(rèn)紅色，選中是設(shè)置為綠色。垂直線：用于計(jì)算最高價(jià)和最低價(jià)，默認(rèn)紅色，選中是設(shè)置為綠色。中繼器表格：需要設(shè)置以下幾列：date：時(shí)間日期Opening_price：開(kāi)盤價(jià)closing_price：收盤價(jià)max_price：最高價(jià)min_price：最低價(jià)volume：成交量rate：今日漲幅溫馨提示：中繼器里面的數(shù)據(jù)可在excel中直接復(fù)制，然后中繼器布局記得選水平。二、制作交互1.k線顏色首先我們要區(qū)分這只股票今天是紅色的還是綠色的，這個(gè)只需要比較開(kāi)盤價(jià)和收盤價(jià)；如果開(kāi)盤價(jià)大于收盤價(jià)，那就是綠色的，如果收盤價(jià)大于開(kāi)盤價(jià)，那就是紅色的。因?yàn)橐婚_(kāi)始我們已經(jīng)設(shè)置了中繼器內(nèi)矩形和垂直線選中時(shí)變成綠色，所以，我們只需要在中繼器每項(xiàng)加載時(shí)做判斷，如果開(kāi)盤價(jià)大于收盤價(jià)，選中中繼器內(nèi)矩形和垂直線即可。具體交互如下：2.設(shè)置k線尺寸我們根據(jù)開(kāi)盤價(jià)、收盤價(jià)、價(jià)格最大值（文本框）、價(jià)格最小值（文本框），外框高度，可以算出中繼器內(nèi)矩形的高度=|(收盤價(jià)-開(kāi)盤價(jià))|/(價(jià)格最大值-價(jià)格最小值)*外框的高度。這里注意，因?yàn)楫?dāng)開(kāi)盤價(jià)=收盤價(jià)的時(shí)候，在k線圖上不是沒(méi)有東西，而是一條橫線，所以最后結(jié)果我們統(tǒng)一+1。同樣，我們根據(jù)最高價(jià)、最低價(jià)、價(jià)格最大值（文本框）、價(jià)格最小值（文本框），外框高度，可以算出中繼器內(nèi)垂直線的高度=(最高價(jià)-最低價(jià))/(價(jià)格最大值-價(jià)格最小值)*外框的高度。3.設(shè)置k線位置這里我們需要用移動(dòng)事件來(lái)做。首先中繼器內(nèi)矩形，x坐標(biāo)保持原來(lái)不變，y坐標(biāo)=(價(jià)格最大值-收盤價(jià))/(價(jià)格最大值-價(jià)格最小值)*外框的高度。中繼器內(nèi)垂直線，同樣x坐標(biāo)保持原來(lái)不變，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)，對(duì)于水平線而言，他是x坐標(biāo)保持不變，移動(dòng)y的坐標(biāo)，理論上應(yīng)該是鼠標(biāo)的y坐標(biāo)值；不過(guò)如果是鼠標(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í)：對(duì)于價(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)簽中部對(duì)齊十字標(biāo)簽，所以還要減4。對(duì)于時(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)簽中部對(duì)齊十字標(biāo)簽，所以還要減4。鼠標(biāo)移入k線時(shí)數(shù)值標(biāo)簽的文本：確定標(biāo)簽位置之后，我們還需要設(shè)置標(biāo)簽的文本，這樣才可以鼠標(biāo)移動(dòng)到哪里就看哪里的數(shù)據(jù)。首先是時(shí)間標(biāo)簽比較簡(jiǎn)單，不需要計(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；開(kāi)盤價(jià)=中繼器表格里的Opening_price；收盤價(jià)=中繼器表格里的closing_price；最高價(jià)=中繼器表格里的max_price；最低價(jià)=中繼器表格里的min_price；漲幅=中繼器表格里的rate（這里要注意一點(diǎn)的是，如果你中繼器里輸入的只是數(shù)字，那就要加上%，如果中繼器里輸入的本來(lái)就有%的就不需要了。）交