SVG饼图的绘制方法

在新公司工作大半年了，使用过SVG绘制几个折线CHART和柱状CHART，当前工作中还没有遇到需要绘制饼图的情况，最近工作悠闲，先提前学习一下饼图的绘制方法以备以后万一。

参考了公司之前的代码，是通过坐标变换和旋转而绘制出来的，比较简洁。而我自己则写了另外一套方法，通过计算各个弧线点的方式（没有坐标变换和旋转），稍微复杂了些。不过可以自由调节其弧的初始角度，而公司以前的第一个弧总是水平的，另外可以在饼图上添加一些文本信息（坐标通过类似方法取得,目前看不上不是很完美）。可能以后扩展会方便些吧。

 

绘制弧度的方法如下：

椭圆圆弧曲线 A 或 a
语法是 "A rx ry x-axis-rotation large-arc-flag sweep-flag x y" 共 7 个参数
rx ，ry 是椭圆弧的半长轴，半短轴长度
x-axis-rotation 是此段弧所在的椭圆的 x 轴与水平方向的夹角，即 x 轴的旋转角度
large-arc-flag 和 sweep-flag 决定了椭圆弧的绘制方向，值是 0 或 1
x,y 是椭圆弧终端坐标
椭圆圆心是计算出来的，不需要指定
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线
sweep-flag , 1 代表从起点到终点弧线绕椭圆中心顺时针方向，0 代表逆时针方向

 

2种方法都需要计算弧度点的坐标，也就是sin和cos值，需要引入JS函数。

pie.xsl 是自己的方法，其中很多参数有点重复。

pie2.xsl是参考公司的方法。

 

运行结果如下图：（输出到PDF当中，也可以修改下输出为单独的SVG文件，其中上面的是pie.xsl，下面的是pie2.xsl）

代码如下 ：https://files.cnblogs.com/qingzhou/pie-svg.rar（pie.xsl，pie2.xsl是2个转换文件，data.xml是数据文件）