图表之折线图

最近项目新增一个图表数据查看的。

效果图如下

各个折线点x,y点坐标很好计算。不好画的是如何让这个折线不穿过这个空心圆

如果折线穿过空心圆，则变成下面这个样子

折线点画圆没错，但是直接连接折线点肯定和圆有相交，但是这又是个空心圆，如果是实心圆，则先画线，再画圆就可以直接覆盖在上面。but 。。产品就是这么虐心，搞个空心圆。。so。实现起来难度就大那么一丢丢了。

既然不能直接连接圆中心，那就是需计算连接圆的那个点。

![Image text](3.png

现把两个圆心坐标(x1,y1),(x2,y2),两个中心点连接的线和圆1交点（dx1,dy1）,和圆2的交点(dx2,dy2).显然。我们不能直接连接(x1,y1)到(x2,y2).否则就是上面图的效果。

我们要连接的就是(dx1,dy1)和(dx2,dy2).这样不会画到圆里面，并且和圆相连。

要计算dx1,dy1,dx2,dy2.则需要利用三角函数。

如上图。要计算dx1,dy1,我们已经知道圆的半径r，如果再知道角度angle。

则

dx1 = r*cos(ang