扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
以前我们利用jQuery制作过一些图表应用，使用起来都非常方便。今天再来看一款基于HTML5Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。
成都创新互联主要从事成都网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务白河,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
一提到插件，我们得需要了解它的一些配置属性，从官方得知共有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说明：动画过程中回调函数。
我刚开始看到上面这些属性，有点懵，相信大家也深感同受吧，下面就拿上面图作为实例谈谈如何使用。
应用
html5 canvas 做饼图基本思路：
主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用
context.arc与lineto两个API。
实现的功能有：
1. 支持标签Legend显示或者隐藏
2. 首次载入动画效果
3. 鼠标tooltip效果
4. 自定义饼图大小与是否添加文字
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网