本文將講解如何通過中繼器與三角繪制一個(gè)折線，并實(shí)現(xiàn)高復(fù)用（做簡單的改變即可適應(yīng)于不同的需求，如改變數(shù)值直接改變折線的樣子，文末附源文件下載。）

原型界面：

中繼器對應(yīng)的數(shù)值：

最終html效果:

現(xiàn)在我們就來看看如何實(shí)現(xiàn)呢？

中繼器數(shù)值分為三個(gè)：

1. xulie:序列（無意義）
2. zhi1:每個(gè)線段起點(diǎn)的值
3. zhi2:每個(gè)線段重點(diǎn)的值（zhi2=后一個(gè)序列的zhi1）

相應(yīng)的中繼器內(nèi)的原件分為是四個(gè)：

1. 起點(diǎn)半圓：d1；
2. 終點(diǎn)半圓：d2；
3. 線段：t；
4. 背景（半透明層）：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)來了，對線段的處理分為如下三部：

1. 將線段移動(dòng)到應(yīng)該的位置d；
2. 計(jì)算出兩點(diǎn)之間的斜線的長度l，并改變線段的尺寸為l；
3. 計(jì)算出線段應(yīng)該旋轉(zhuǎn)的角度，并旋轉(zhuǎn)線段。

直接上公式了：

1. 移動(dòng)位置為（0，[[This.y-Item.zhi1-5]]）。
2. 線段長度為 （[[Math.pow（This.width*This.width+（Item.zhi2-Item.zhi1）*（Item.zhi2-Item.zhi1）,0.5）]]） 【y= （隔斷的寬度^2+起點(diǎn)終點(diǎn)的高度差^2）開平方】。
3. 旋轉(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)行一下：

是不是很簡單呢？

再講講如何復(fù)用：

1. 若需要改變數(shù)據(jù)條數(shù)，直接為中繼器添加數(shù)據(jù)幾個(gè)；
2. 若需要改變一個(gè)隔斷的寬度，直接改變中繼器中的的 線段t的長度 與背景半透明層yt的寬，并調(diào)整終點(diǎn)的起始位置即可；
3. 需要調(diào)整整個(gè)折線圖的高度，直接改變中級其中的線段 t 起點(diǎn)終點(diǎn)半圓（d1,d2）的位置，并改變半透明層yt的高度即可。

這個(gè)頁面是參考的是公眾平臺助手的一個(gè)數(shù)據(jù)界面，完整界面如下（源文件可下載）：

原型文件下載：

鏈接：https://pan.baidu.com/s/1f4UHdLXVLSytPUGh3TKUvw

密碼：e48t

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

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