原文地址：http://www.2cto.com/kf/201108/100251.html

HTML5引入Canvas元素，用于图形的绘制，我们可以仅仅基于HTML和JavaScript就能绘制出原本可能需要第三方组件的图形。因为做数据统计比较多，那么就用画饼图做为示例来说明。之前绘制饼图可以使用JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart，这些组件的使用之前也介绍过，可以参阅以前的文章。本部分仅来介绍HTML5的Canvas绘制饼图。
饼图的基础是原型，那么我们先来看看如何使用Canvas绘制原型。当然这很简单了，首先编写HTML代码，如下：
Html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>HTML5 Demo</title>

</head>

<body>

<canvas id="circle" width="400" height="300">您的浏览器暂不支持Canvas</canvas>

</body>

</html>

HTML仅仅定义显示的内容，如何画图还要借助JavaScript了，这也很简单，我们来看一下：

Js代码

<script type="text/javascript">

function drawCircle(){

var canvas = document.getElementById("circle");

var ctx = canvas.getContext("2d");

ctx.fillStyle = '#77D1F6';

ctx.beginPath();

ctx.moveTo(200,150);

ctx.arc(200,150,150,0,Math.PI*2,false);

ctx.fill();

}

drawCircle();

</script>

我们就在html文件中使用<script>标签来写即可，下面来解释这段代码。首先通过getElementById()方法获取到我们的canvas元素，然后从canvas中获取上下文环境，我们绘制的是2d图形，紧接着是填充的效果，我们定义一种颜色来填充。可能这里有人想到了strokeStyle，这个是绘制路径的颜色，而不是填充的颜色了。然后调用beginPath()开始绘制，首先将画笔移动到圆心处，就是从圆心开始绘制路径，当然这句可以不加，画圆的话不需要每次都回圆心，但是画饼图就需要了了，所以为以后考虑，加上也没事。这里的圆心坐标是（200，150），就是距离左上角向右200个像素，向下150个像素的位置。
之后的arc方法就是画圆的了。参数的含义为：前两个是圆心坐标，上面解释过了。第三个参数是半径大小，我们定义canvas的宽度为300像素，这里用半径就是300的一半，第四个参数是圆周起始位置，这就很有说头了，也涉及到一些几何知识，我们来看一张图：

0 PI就是起始位置了，沿顺时针路线，分别是0.5 PI（正下方），1 PI和1.5 PI（正上方），这个为我们以后画饼图提供了扇形范围的依据。

第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，这没什么好说的，完全的数学知识。第六个参数是个布尔值，就是确定是顺时针还是逆时针，这里false是顺时针。基础的内容就说完了，我们来看一下效果：

我们可以使用FireFox，Chrome，Safari或Opera来查看效果，IE只会出一行字。画圆很简单，那么扇形就是要计算弧长的图形，扇形组合成一个整圆，就是我们要的饼图了。我们一步一步来，开始画扇形。做数据统计时，我们喜欢用百分比，那么将整个圆周视为100份，我们计算百分数。将JavaScript代码调整如下：
Js代码

<script type="text/javascript">

var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];

var data = [5,30,15,30,20];

function drawCircle(){

var canvas = document.getElementById("circle");

var ctx = canvas.getContext("2d");

var startPoint=0;

for(var i=0;i<data.length;i++){

ctx.fillStyle = color[i];

ctx.beginPath();

ctx.moveTo(200,150);

ctx.arc(200,150,150,startPoint,startPoint+Math.PI*2*(data[i]/100),false);

ctx.fill();

startPoint+=Math.PI*2*(data[i]/100);

}

}

drawCircle();

</script>

解释一下：定义了两个全局变量，color和data用于放置数据和对应的扇形区域的颜色。drawCircle()方法中加入循环，就是根据数据和颜色来进行自动填充，此时就必须使用moveTo()方法来每次回到圆心了，否则就不是扇形了，可以自行去测试。然后对arc方法进行调整，可以发现，第四，第五参数调整，就是扇形其实位置和结束位置了，这里我们定义的startPoint是0，就是从左水平点开始画图，为顺时针方向。画图的弧长是按百分数计算，也就是data数组中的每一项除以100得出的结果，当然data数组本身的和也是100。
之后进行扇形区域的填充，使用fill()方法即可，我们看到如下结果：

到此为止，我们就画好扇形了，细心的人会发现，我们每个扇形连接处都有一道白线，产生的这个问题我们之前说过，就是strokeStyle和stroke方法这里没有用，那么没有对画线的路径进行填充，而画扇形必须要回圆心，那么就需要对画线的路径进行相应填充，在相应位置加上这两个方法，白线就没有了。
最后，我们要求，从正上方逆时针开始绘图，该如何做？将起始位置定义为1.5PI，arc方法最后一个参数为true，每次的增量不能加，要减，就可以了，代码修改为：
Js代码

<script type="text/javascript">

var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];

var data = [5,30,15,30,20];

function drawCircle(){

var canvas = document.getElementById("circle");

var ctx = canvas.getContext("2d");

var startPoint = 1.5 * Math.PI;

for(var i=0;i<data.length;i++){

ctx.fillStyle = color[i];

ctx.strokeStyle = color[i];

ctx.beginPath();

ctx.moveTo(200,150);

ctx.arc(200,150,150,startPoint,startPoint-Math.PI*2*(data[i]/100),true);

ctx.fill();

ctx.stroke();

startPoint -= Math.PI*2*(data[i]/100);

}

}

drawCircle();

</script>

我们再来看看效果：

Canvas绘制饼图掌握这么多基本就够了，可以处理常见的数据统计了，只要注意这里我们扇形划分是按照百分比进行的，那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单，调整几个参数即可。
第二部分将结合CSS3来制作一个完整的示例。欢迎交流，本示例系作者的实践探究，希望对使用者有用。

HTML5绘制饼图示例（一）的更多相关文章

  1. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  2. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  3. 【带着canvas去流浪】 （3）绘制饼图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...

  4. Qt之自绘制饼图

    1.说明 最近在搞绘图方面的工作,说实话C++的第三方绘图库并不算多,总之我了解的有:qtcharts.ChartDirector.qwt.kdchart和QCustomPlot.这几个库各有利弊. ...

  5. matplotlib 知识点11：绘制饼图（pie 函数精讲）

    饼图英文学名为Sector Graph,又名Pie Graph.常用于统计学模块. 画饼图用到的方法为:matplotlib.pyplot.pie( ) #!/usr/bin/env python # ...

  6. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  7. 带着canvas去流浪系列之三 绘制饼图

    [摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. Python pyecharts绘制饼图

    一.pyecharts绘制饼图语法简介 饼图主要用于表现不同类目的数据在总和中的占比.每个的弧度不是数据量的占比pie.add()方法的用法add(name, attr, value, radius= ...

  9. Python培训：绘制饼图或圆环图

    使用pyplot的pie()函数可以快速地绘制饼图或圆环图,pie()函数的语法格式如下所示: 该函数常用参数的含义如下. ·x:表示扇形或楔形的数据. ·explode:表示扇形或楔形离开圆心的距离 ...

随机推荐

  1. django HttpResponse的用法

    一.传json字典 def back_json(rquest): #JsonResponse父类是HttpResponse,原码里调用了json.dumps() from django.http im ...

  2. 欧拉函数　　已经优化到o(n)

    欧拉函数 ψ(x)=x*(1-1/pi)  pi为x的质数因子 特殊性质(图片内容就是图片后面的文字) 欧拉函数是积性函数——若m,n互质, ψ(m*n)=ψ(m)*ψ(n): 当n为奇数时,   ψ ...

  3. Iterator迭代器快捷键

    原文:https://blog.csdn.net/mingjie1212/article/details/51143444/ ★.iter 生成增强for:for (String s : locati ...

  4. SVN ：Unable to connect to a repository at URL

     编程之路刚刚开始,错误难免,希望大家能够指出. 单位换地方了,SVN的服务器和本机不在一个网段,原先的SVN文件夹进行“SVN Update”的时候报错了,如下: 网上一查,原来是DNS域名解析错误 ...

  5. 【java编程】使用System.getProperty方法，如何配置JVM系统属性

    转载:https://www.cnblogs.com/acm-bingzi/p/6673823.html很多时候我们需要在项目中读取外部属性文件,用到了System.getProperty(" ...

  6. window.location.herf=url参数有中文，到后台乱码问题解决

    js中的代码: /*将中文的参数进行两次编码 */ function queryByName(){                    //获取查询条件的用户名                   ...

  7. golang for 循环变量取内存地址

    前几天提交的代码进行测试的时候发现变量无法赋值,原始代码如下: for _, asset := range dspInfo.native.Assets { var resAsset protocol. ...

  8. httpService 和 WebService接口协议

    http协议: 1.调用接口 例1:此例子传输参数为XML文本格式字符串: 将数据缓冲区上载到具有指定 URI 的资源.  var url = "http://localhost:23265 ...

  9. zookeeper 启动显示started，jps查看进程却没有，解决方法

    如图所示, 输入 zkServer.sh start 显示如下: Starting zookeeper ... STARTED 可是输入jps指令 却找不到zookeeper进程 去zkdata文件目 ...

  10. Redis：高性能文件缓存key-value储存

    1.前言 a.Redis是一个开源,先进的key-value(键/值对)存储,并且勇于构建高性能,可扩展的Web应用程序的完美解决方案 b.Redis和Memcached的对比 b.1 Redis数据 ...