我们在做K线图，或者趋势图的时候，经常会遇到各种各样的麻烦。这篇文章，我给大家讲下我做折线图的思路。
先看下渐变折线图的效果，我没标刻度，只展示折线图：
a1.gif
整体的大思路：
1.画多边形，（非折线），因为这里需要有填充色的，一条线没法完成，只能是一个封闭的图形；
2.动态的改变多边形的宽度。
大思路其实很简单，做过客户端开发的同学可能很快就能实现，因为客户端有很多绘图的方法和控件。而ReactNative绘图就没那么方便了，我看有朋友用纯代码画过折线图，方法很复杂，还需要计算曲率等问题。我就开始找一些三方库，综合对比，选择react-native-svg,github上有3.5k个start,并且支持iOS和Android。想使用的同学可以看链接，注意iOS工程和安卓工程要做一定的配置。
具体实现方法：
一.画多边形
使用的是svg库里的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。折线的点要比多边形的点少，因为不用最后去做封闭图形。points的点，是按这样的坐标系来的
坐标系.png
二。渐变展开
这个想法也很简单，动态的改变多边形的width，Animationd中得transform[scaleX:0->1]。让宽度在指定的时间里有0变为1。但是发现这个形变效果有问题，X坐标不是从0开始，而是从中间开始，而且ReactNative还没有属性能控制，详见文章react-native支持transform-origin探索,RN中我们没法改变transform-origin。因此只能曲线救国，将形变的图形一分为二，用右边的向右展开的来做动画。
<Animated.View style={{
height: 200, width: 300 * 2, left: -200, bottom: -300, position: 'absolute', backgroundColor: 'clear', transform: [
{ scaleX: chartWidth }, // x轴移动
]
}}>
<Svg
height="200"
width="300"
style={{ left: 300, position: 'absolute' }}
>
至此，可以达到开始的gif的效果。同时也希望facebook能尽快支持transform-origin属性。
本文Demo地址欢迎各位同行的提问和指正。
