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是数据文件)

原文地址:https://www.cnblogs.com/qingzhou/p/1810256.html