起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)中繼器&三角函數(shù)繪制高復(fù)用折線圖（附源文件）
本文將講解如何通過(guò)中繼器與三角繪制一個(gè)折線，并實(shí)現(xiàn)高復(fù)用（做簡(jiǎn)單的改變即可適應(yīng)于不同的需求，如改變數(shù)值直接改變折線的樣子，文末附源文件下載。）
原型界面：
中繼器對(duì)應(yīng)的數(shù)值：
最終html效果:
現(xiàn)在我們就來(lái)看看如何實(shí)現(xiàn)呢？
中繼器數(shù)值分為三個(gè)：
- xulie:序列（無(wú)意義）
- zhi1:每個(gè)線段起點(diǎn)的值
- zhi2:每個(gè)線段重點(diǎn)的值（zhi2=后一個(gè)序列的zhi1）
相應(yīng)的中繼器內(nèi)的原件分為是四個(gè)：
- 起點(diǎn)半圓：d1；
- 終點(diǎn)半圓：d2；
- 線段：t；
- 背景（半透明層）：yt （為了出背景交替的效果，也是作為隔斷的寬）。
將值帶入：
d1的坐標(biāo)（0，[[This.y-Item.zhi1-5]]）
y=當(dāng)前點(diǎn)的位置-應(yīng)該上移動(dòng)的位置；應(yīng)該上移動(dòng)的位置=zhi1+6（起點(diǎn)半圓的半徑）-1（線寬的一半）
d2的坐標(biāo)（[[yt.width-6]]，[[This.y-Item.zhi2-5]]）
x=一個(gè)隔斷的寬度-終點(diǎn)半圓的半徑】【y=當(dāng)前點(diǎn)的位置-應(yīng)該上移動(dòng)的位置；應(yīng)該上移動(dòng)的位置=zhi2+6（起點(diǎn)半圓的半徑）-1（線寬的一半）
現(xiàn)在重點(diǎn)來(lái)了，對(duì)線段的處理分為如下三部：
- 將線段移動(dòng)到應(yīng)該的位置d；
- 計(jì)算出兩點(diǎn)之間的斜線的長(zhǎng)度l，并改變線段的尺寸為l；
- 計(jì)算出線段應(yīng)該旋轉(zhuǎn)的角度，并旋轉(zhuǎn)線段。
直接上公式了：
- 移動(dòng)位置為（0，[[This.y-Item.zhi1-5]]）。
- 線段長(zhǎng)度為 （[[Math.pow（This.width*This.width+（Item.zhi2-Item.zhi1）*（Item.zhi2-Item.zhi1）,0.5）]]） 【y= （隔斷的寬度^2+起點(diǎn)終點(diǎn)的高度差^2）開平方】。
- 旋轉(zhuǎn)的角度為（[[Math.atan（Item.zhi2-Item.zhi1）/yt.width）*180/3.14]]）【角度=atan（起點(diǎn)終點(diǎn)的y軸差/起點(diǎn)終點(diǎn)的x軸差）】。
大功告成！
改變數(shù)值在運(yùn)行一下：
是不是很簡(jiǎn)單呢？
再講講如何復(fù)用：
- 若需要改變數(shù)據(jù)條數(shù)，直接為中繼器添加數(shù)據(jù)幾個(gè)；
- 若需要改變一個(gè)隔斷的寬度，直接改變中繼器中的的 線段t的長(zhǎng)度 與背景半透明層yt的寬，并調(diào)整終點(diǎn)的起始位置即可；
- 需要調(diào)整整個(gè)折線圖的高度，直接改變中級(jí)其中的線段 t 起點(diǎn)終點(diǎn)半圓（d1,d2）的位置，并改變半透明層yt的高度即可。
這個(gè)頁(yè)面是參考的是公眾平臺(tái)助手的一個(gè)數(shù)據(jù)界面，完整界面如下（源文件可下載）：
原型文件下載：
鏈接：https://pan.baidu.com/s/1f4UHdLXVLSytPUGh3TKUvw
密碼：e48t
本文由 @?ytw 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
贊