如何基于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说明：动画过程中回调函数。

canvas能做什么?

canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。

这篇文章是一篇基础教程，你能了解一些设计方法。比如用HTML5 canvas 进行图形设计。

用HTML5 canvas设计

设计和开发一个web页面会包含很多的内容，用户首先需要有一个支持HTML canvas的浏览器。

首先创建一个HTML5文档页面，设置document type是HTMl5的；

其次在页面body区域添加一个canvas标签：

<canvas></canvas>

第三、给这个canvas定义一个id属性，这样方便我们在js中调用它。添加一个宽和高属性，在canvas标签中添加一个当浏览器不支持的时候显示给用户的内容。下面是列子代码：

<canvas id="canvastest" width="500" height="600">

<p>你的浏览器不支持HTML5 canvas,请更新您的浏览器！</p>

</canvas>

现在我们创建了一个包含HTML5 canvas 元素的空白画布，我们将使用js和canvas元素的方法来创建我们的图像。

添加一个javascript用HTMl5 canvas的方法：

var canvasTest=document.getElementById('canvastest')//获取canvas元素；

var testcontext=canvasTest.getContext('2d')

使用javascript来创建你的画布，你可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建你的设计。

下面是完成的代码：

var canvasTest=document.getElementById('canvastest')

var testcontext=canvasTest.getContext('2d')

// create rectangle

testcontext.fillStyle='rgb(0,125,125)'

testcontext.fillRect(10,10,250,180)

// create circle

testcontext.beginPath()

testcontext.arc(300, 340, 100, 0, Math.PI * 2, true)

testcontext.closePath()

testcontext.fillStyle='rgb(75,10,125)'

testcontext.fill()

testcontext.stroke()

我们可以将上面的代码加入window.onload，或者jQuery的ready方法里，当文档加载完，将会创建文明的图形。

一些HTML5 canvas 图像解决方案

用与HTML5 Canvas元素你可以开发动态绘图对象比如如可视化信息或数据图。HTML5 canvas 可以在javascript的帮助下很容易的绘制二维图形。让我们来看一下HTML5 canvas元素的一些数据图应用。

1. HumbleFinance

HumbleFinance是用js开发的一个开源的数据可视化图表，它用HTML5 canvas生成可视化图表数据，它可以用一个轴来展示任何两个二维的数据集。

地址： http://www.humblesoftware.com/finance/index

2.Graphr

Graphr是一个用HTML5 canvas写的一个计算器应用，有每个图像计算器应有的基本功能。

地址：http://www.graphr.org/

3.用HTML5和jQuery创建的华丽的动画饼图

你可以用javascript和HTML5来创建一个交互式饼图，有华丽的动画效果。这在之前只能用flash来完成，现在也可以使用最新的HTML5技术了。

地址：http://cyberpython.github.com/AwesomeChartJS/

4. AwesomeJS

AwesomeJS 能够让你创建简单有用的图表，而仅需几行代码即可。这是一个基于HTML5和canvas的javascript库。

地址：http://cyberpython.github.com/AwesomeChartJS/

5.Ticker Plot（股票图）

Ticker Plot（股票图）是每一个在工作是使用图标的web开发人员都必备的一个图表工具。这是一个开源的项目，它使用HTML5 canvas在画布上绘制图形符号和鼠标事件。Ticker Plot（股票图）是专门为股票行情和技术分析设计的。

1准备数据

在制作图表前，需要先定义图表的数据来源。

在上面的图表制作流程中提到数据来源有两种类型，数据集数据源和单元格数据源，本章节使用数据集作为数据源，如果需要使用单元格数据源，可查看定义图表单元格数据源。

新建工作薄，添加数据集，SQL语句为SELECT * FROM [销量]，使用销量表作为图表的数据来源。

2插入图表并选择图表类型

图表有两种插入方式：单元格图表与悬浮图表，该例中我们以悬浮图表为例，单元格图表的插入方式请查看单元格图表。

点击工具栏中的插入>悬浮元素>插入图表，d出图表向导，选择图表类型如柱形图，如下图：

注：插入图表和选择图表类型一般性是在一起完成的。

定义图表数据

选择完图表类型后，点击确定，返回报表主体界面，选中悬浮图表，在报表主体右侧上方的图表属性表中设置图表属性，选择图表属性表-数据，设置柱形图的数据，如下图：

设置图表数据，首先要选择数据来源，前面我们新建了一个数据集ds1，这张图表的数据来源于数据集数据，选择好数据来源之后，为分类轴、系列名、系列值绑定数据集中的字段，用图表来展示数据集中的数据。

分类轴：就是图表的横轴，即x轴，表示数据是按照什么分类显示的；

系列名：系列就是图表的纵轴，即y轴，系列名称表示每个分类下数据是按照什么顺序显示的；

系列值：就是每个系列的值；

汇总方式：对系列值的计算方式。

图表样式设置

标题设置

选中图表，在设计器右侧上方会出现图表属性表，选择图表属性表-样式>标题，增加图表标题

系列标签设置

选择图表属性表-样式>标签，勾选标签，显示出每个系列的值：

保存模板

---