如何用canvas画图表(1)扇形图和环形图
现在canvas图表的库越来越多,也越来越成熟,以致于大家想到图表制作都直接想着用第三方库,而忽略了自己动手制作的可能性。其实要绘制一个简单基本的canvas图表库并不难。下面就让我展开介绍。
第一期,我先挑了最基础的扇形和环形图表进行讲解。
若要看懂此文,先要阅读一下MDN的canvas文档。
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
有了canvas的基础之后,我们便可以开始对问题进行拆解。
画一个扇形或者环形图需要什么元素。
1. 画一出扇形或环形,以及上色
2. 数据标签。
3. 动画效果。
1. 绘制图形,则需要找到合适的绘制图形的函数。
绘制圆弧 arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法有五个参数: x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及engAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
重复以上步骤,则可以将各个扇形分别画出来。
如果想画环形,则给线上色,而非画扇形那样,