如何用html5 canvas 做饼图

html-css010

如何用html5 canvas 做饼图,第1张

html5 canvas 做饼图基本思路:

主要是利用HTML5 Canvas实现饼图绘制,绘制弧度的API主要是使用

context.arc与lineto两个API。

实现的功能有:

1. 支持标签Legend显示或者隐藏

2. 首次载入动画效果

3. 鼠标tooltip效果

4. 自定义饼图大小与是否添加文字

以前我们利用jQuery制作过一些图表应用,使用起来都非常方便。今天再来看一款基于HTML5Canvas的饼状图图表应用,鼠标点击饼状图的某块区域时,即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的,所以需要支持HTML5的浏览器才能够使用。

一提到插件,我们得需要了解它的一些配置属性,从官方得知共有10个属性,如下:

barColor

默认:#ef1e25

说明:指的是该curcular栏的颜色。你可以通过像RGB,RGBA十六进制或字符串颜色任一有效的CSS颜色字符串。 但你也可以通过接受目前的百分比值来返回一个动态生成的颜色的功能。

trackColor

默认:#f2f2f2

说明:轨道颜色。

scaleColor

默认:#dfe0e0

说明:刻度线的颜色。

lineCap

默认:round

说明:定义栏线的终点的形状。可能的值有: 对接,圆形和方形 。

lineWidth

默认:3

说明:中间轨道宽度。

size

默认:110

说明:饼图大小。规定为一个正方形。

animate

默认:false

说明:设置动画缓冲时间。

onStart

默认:$.noop

说明:动画开始回调函数。

onStop

默认:$.noop说明:动画结束回调函数。

onStep

默认:$.noop说明:动画过程中回调函数。