我們?cè)谧鯧線圖沃饶，或者趨勢(shì)圖的時(shí)候，經(jīng)常會(huì)遇到各種各樣的麻煩翎蹈。這篇文章哲戚，我給大家講下我做折線圖的思路。
先看下漸變折線圖的效果耙考，我沒標(biāo)刻度谜喊，只展示折線圖：
a1.gif
整體的大思路：
1.畫多邊形，（非折線）倦始，因?yàn)檫@里需要有填充色的斗遏，一條線沒法完成，只能是一個(gè)封閉的圖形鞋邑；
2.動(dòng)態(tài)的改變多邊形的寬度诵次。
大思路其實(shí)很簡(jiǎn)單，做過客戶端開發(fā)的同學(xué)可能很快就能實(shí)現(xiàn)枚碗，因?yàn)榭蛻舳擞泻芏嗬L圖的方法和控件逾一。而ReactNative繪圖就沒那么方便了，我看有朋友用純代碼畫過折線圖肮雨，方法很復(fù)雜遵堵，還需要計(jì)算曲率等問題。我就開始找一些三方庫(kù)怨规，綜合對(duì)比陌宿，選擇react-native-svg,github上有3.5k個(gè)start,并且支持iOS和Android。想使用的同學(xué)可以看鏈接波丰，注意iOS工程和安卓工程要做一定的配置壳坪。
具體實(shí)現(xiàn)方法：
一.畫多邊形
使用的是svg庫(kù)里的Polyline（多變形）組件。這里要注意掰烟，既要畫多邊形爽蝴，還要畫上面的那根折線
<Svg
height="200"
width="300"
style={{ left: 300, position: 'absolute' }}
>
<Polyline
points="0 20,40 5,100 15,150 3,200 20"
stroke="black"
strokeWidth="2.5"
/>
<Polyline
points="0 20,40 5,100 15,150 3,200 20,200 50,0 50,0 20"
fill="yellow"
/>
</Svg>
折線要有stroke沐批，多邊形要有fill。折線的點(diǎn)要比多邊形的點(diǎn)少霜瘪，因?yàn)椴挥米詈笕プ龇忾]圖形珠插。points的點(diǎn)，是按這樣的坐標(biāo)系來的
坐標(biāo)系.png
二颖对。漸變展開
這個(gè)想法也很簡(jiǎn)單捻撑，動(dòng)態(tài)的改變多邊形的width，Animationd中得transform[scaleX:0->1]缤底。讓寬度在指定的時(shí)間里有0變?yōu)?顾患。但是發(fā)現(xiàn)這個(gè)形變效果有問題，X坐標(biāo)不是從0開始个唧，而是從中間開始江解，而且ReactNative還沒有屬性能控制，詳見文章react-native支持transform-origin探索,RN中我們沒法改變transform-origin徙歼。因此只能曲線救國(guó)犁河，將形變的圖形一分為二，用右邊的向右展開的來做動(dòng)畫魄梯。
<Animated.View style={{
height: 200, width: 300 * 2, left: -200, bottom: -300, position: 'absolute', backgroundColor: 'clear', transform: [
{ scaleX: chartWidth }, // x軸移動(dòng)
]
}}>
<Svg
height="200"
width="300"
style={{ left: 300, position: 'absolute' }}
>
至此桨螺，可以達(dá)到開始的gif的效果。同時(shí)也希望facebook能盡快支持transform-origin屬性酿秸。
本文Demo地址歡迎各位同行的提問和指正灭翔。
