上篇<原生Canvas绘制饼图>介绍了如何使用Canvas来绘制环图，这篇用SVG标签来实现一下。
SVG环图效果
上面是完整效果图，下面来看看具体实现。
使用的SVG元素
- ：SVG代码的开始标签，相当于创建一个画布。在svg标签里，插入其它SVG元素，来进行绘图;
-
: path元素用于定义一个路径，使用path标签来绘制每项数据的环图份额; -
：polyline元素用于定义一条曲线，使用polyline绘制每项数据的线条; -
: text元素用于定义文本,使用text显示数据的文本信息。
以上是会用到的几个SVG标签，详细说明可以看看菜鸟教程SVG或者MDN的SVG教程
SVG是一种用来描述二维矢量图形的XML标记语言，所以SVG标签不能使用document.createElement直接创建(浏览器无法识别)。需要使用document.createElementNS创建一个具有指定的命名空间URI和限定名称的元素，SVG的命名空间是'http://www.w3.org/2000/svg'。这里将创建SVG标签操作写在了createSvgTag函数里。下面先新建一个svg元素：
/**
* 将创建环图的所有操作写在drawPie函数内，配置一些默认参数
* @param {Element} element [插入SVG的元素，缺省直接插入到body]
* @param {Number} R [外弧起终点计算半径]
* @param {Number} r [内弧起终点计算半径]
* @param {Number} width [画布宽度]
* @param {Number} height [画布高度]
* @param {Array} data [图表数据]
*/
function drawPie({element, R = 140, r = 100,width = 450,height = 400,data = []} = {}) {
let w = width;
let h = height; //将width、height赋值给w、h
let origin = [w / 2, h / 2]; //以画布的中心点，作为环图的原点
//创建一个svgs标签
let svg = createSvgTag('svg', {
'width': w + 'px',
'height': h + 'px',
'viewBox': `0 0 ${w} ${h}`,
});
(element && element.appendChild) ? element.appendChild(svg) : document.body.appendChild(svg);//插入到DOM
/**
* 将创建SVG标签写成一个函数
* @param {tring} tagName [标签名]
* @param {Object} attributes [标签属性]
* @return {Element} svg标签
*/
function createSvgTag (tagName, attributes) {
let tag = document.createElementNS('http://www.w3.org/2000/svg', tagName)
for (let attr in attributes) {
tag.setAttribute(attr, attributes[attr])
}
return tag;
}
})
//调用
drawPie({
data: [{
cost: 4.94,
category: '通讯',
color: "#e95e45",
}, {
cost: 4.78,
category: '服装美容',
color: "#20b6ab",
}, {
cost: 4.00,
category: '交通出行',
color: "#ef7340",
}, {
cost: 3.00,
category: '饮食',
color: "#eeb328",
}, {
cost: 49.40,
category: '其他',
color: "#f79954",
}, {
cost: 28.77,
category: '生活日用',
color: "#00a294",
}]
})
绘制每项数据的环图份额
我们会用到的指令有：
- Moveto(移动画笔到起始点)，语法：'M x,y' 在这里x和y是绝对坐标，分别代表水平坐标和垂直坐标;
- Lineto(绘制直线),语法：'L x, y' 在这里x和y是绝对坐标，表示直线的结束点坐标;
- Arcto(绘制弧曲线路径)，语法：'A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y',rx和ry分别是x和y方向的半径(绘制圆弧时，rx和ry相等);LargeArcFlag的值确定是要画小弧或大弧，0表示画小弧(即画两点之间弧长最小的弧)，1表示画大弧(当弧度大于Math.PI时需要画大弧);SweepFlag用来确定画弧的方向，0逆时针方向，1顺时针方向;x和y是目的地的坐标;
- ClosePath(闭合路径),语法是'Z'或'z';
详情MDN path元素d属性。
我们需要用path绘制如下的路径：
图1
如图：份额的绘制是先使用M命令移动到P0，L命令绘制一条直线到P1,A命令从P1画弧到P2,L命令从P2绘制一条直线到P3,A命令从P3绘制一条弧线到P0，最后Z命令关闭路径。然后我们只要填充这个路径就可以完成每项份额绘制了。这里我们需要求出4个点的绝对坐标，如何计算这四个坐标？
图2
如图，通过三角函数，我们就可以计算出每个点的位置。我们已知原点O坐标(画布中点)、外环半径R和内环半径r(我们自己给定);再通过计算出每项数据的弧度占比，我们就可以得到每项数据的起始弧度(即上一项的结束弧度，第一项为0)和结束弧度(起点+项数据的弧度占比)。x值为原点x+sin(angel)半径，y值为原点y-cos(angel)半径
这里将计算点坐标的运算写在evaluateXY函数中,如下：
/**
* 计算Xy坐标
* @param {[type]} r [半径]
* @param {[type]} angel [角度]
* @param {[type]} origin [原点坐标]
* @return {[Array]} 坐标
*/
function evaluateXY (r, angel, origin) {
return [origin[0] + Math.sin(angel) * r, origin[0] - Math.cos(angel) * r]
}
接下来，我们遍历数据，计算出每项数据的四个点：
//遍历计算每项数据
for(let v of data) {
let itemData = Object.assign({}, v);//copy一遍，不直接修改原数据
eAngel = sAngel + v.cost / total * 2 * Math.PI; //计算结束弧度
itemData.arclineStarts = [
evaluateXY(r, sAngel, origin), //计算P0坐标
evaluateXY(R, sAngel, origin), //计算P1坐标
evaluateXY(R, eAngel, origin), //计算P2坐标
evaluateXY(r, eAngel, origin) //计算P3坐标
];
itemData.LargeArcFlag = (eAngel - sAngel) > Math.PI ? '1' : '0';//大于Math.PI需要画大弧，否则画小弧
drawData.push(itemData);//保存到drawData数组中，绘制时遍历
sAngel = eAngel;//将下一项数据的起始弧度设置为当前项的结束弧度
}
下面，遍历drawData，绘制环图：
//遍历计算每项数据，进行绘制
for(let v of drawData) {
let P = v.arclineStarts;
let path = createSvgTag('path', {
'fill': v.color, //设置填充色
'stroke': 'black',
'stroke-width': '0', //画笔大小为零
/**
* d属性设置路径字符串
* M ${P[0][0]} ${P[0][1]} 移动画笔到P0点
* L ${P[1][0]} ${P[1][1]} 绘制一条直线到P1
* A ${R} ${R} 0 ${v.LargeArcFlag} 1 ${P[2][0]} ${P[2][1]} 绘制外环弧到P2,R为外半径，v.LargeArcFlag画大弧还是小弧
* L ${P[3][0]} ${P[3][1]} 绘制一条直线到P3
* A ${r} ${r} 0 ${v.LargeArcFlag} 0 ${P[0][0]} ${P[0][1]} 绘制内环弧到P0点
* z 关闭路径
*/
'd': `M ${P[0][0]} ${P[0][1]} L ${P[1][0]} ${P[1][1]} A ${R} ${R} 0 ${v.LargeArcFlag} 1 ${P[2][0]} ${P[2][1]} L ${P[3][0]} ${P[3][1]} A ${r} ${r} 0 ${v.LargeArcFlag} 0 ${P[0][0]} ${P[0][1]} z`
})
svg.appendChild(path); //添加到画布中
}
到这里，就已经绘制出如下环图了：
图3
记得还需要把相关变量先声明一下。
、绘制线条、文字
下面我们需要绘制线条和文字。
- 起点坐标：这里设置起点为每项数据的弧线中间位置，通过计算中间位置对应的弧度，就可以通过三角函数计算出这个点坐标;
- 线束点坐标：当线条起点在右侧时，线束点就是垂直平行起点图表最右侧位置；当线条起点在左侧时，线束点就是垂直平行起点图表最右左位置;假设起点为[sx,sy]，右左结束点应该就是[w,sy]、[0,sy],w为图表宽度;
- 折点：需要处理数据会挤在一起的情况，就会改变结束点坐标的y值，当起点和结束点y值不相等时，就需要设置折点。
以下是完整代码：
svg-pie
也可以查看gitee。
总结一下
- 难点：难的地方就在弧上各点的计算，需要好好再回忆一下数学的三角函数。
- 对比canvas：canvas只需有一个标签，svg实现就在DOM中增加了一堆标签。这样一来，svg的优势就在于第项都是一个标签，你可以直接针对这个标签要绑定事件和做修改。比如要实现鼠标称到某个项，放大这个项，svg只要给每个path绑定事件，修改当前的这个path就行;而canvas只能在canvase绑定事件，先通过计算鼠标位置来判断移动到了哪个份额上，然后再重绘整个canvas;同样，标签过多也是svg的缺点，我们这点标签其实没什么，一旦标签多起来，肯定是会给浏览器渲染带来负担的。