如何用html5 canvas 做饼图

html-css09

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

html5 canvas 做饼图基本思路:

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

context.arc与lineto两个API。

实现的功能有:

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

2. 首次载入动画效果

3. 鼠标tooltip效果

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

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

在 HTML 页面上显示出有交互的统计图有2种方法:

一、用JavaScript做出饼状图或柱形图,需要精通JS代码。

二、利用第三方网站提供的组件:

1、Open Flash Chart是一个开源的Flash制图组件。

2、 XML SWF Charts是一个简单,但强大,利用Flash和动态生成XML数据来产生web chart的工具。

3、 Flotr是一个基于Prototype开发的javascript绘图工具。支持图例,鼠标跟踪,图片区域选择,图片缩放,添加事件钩子(event hook),通过CSS设置样式等。

4、FusionCharts Free是一个制图组件用于创建好看,数据驱动,拥有动画效果的Flash charts。它能够与PHP、Python、Ruby on Rails、ASP、http://ASP.NET、JSP、ColdFusion、HTML页面等一起使用。这个组件是FusionCharts的免费版,但功能仍然很强大。