HTML5引入Canvas元素，用于图形的绘制，我们可以仅仅基于HTML和JavaScript就能绘制出原本可能需要第三方组件的图形。因为做数据统计比较多，那么就用画饼图做为示例来说明。之前绘制饼图可以使用JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart，这些组件的使用之前也介绍过，可以参阅以前的文章。本部分仅来介绍HTML5的Canvas绘制饼图。
饼图的基础是原型，那么我们先来看看如何使用Canvas绘制原型。当然这很简单了，首先编写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了，这也很简单，我们来看一下：
<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代码调整如下：
<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，每次的增量不能加，要减，就可以了，代码修改为：
<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来制作一个完整的示例。欢迎交流，本示例系作者的实践探究，希望对使用者有用。
- 大小: 14.5 KB
- 大小: 31.9 KB
- 大小: 34.5 KB
- 大小: 34.7 KB
分享到：
相关推荐
HTML5是一种强大的网页开发语言，它为网页开发者提供了丰富的功能，包括绘图能力。在HTML5中，我们可以通过Canvas API来实现图形的绘制，其中...对于数据分析、信息展示等场景，HTML5绘制饼图是一个非常实用的技能。
JavaScript绘制曲线、圆形饼图实例 本资源是关于使用JavaScript绘制曲线和圆形饼图的实例。该实例使用HTML、JavaScript和CSS技术来实现曲线和圆形饼图的绘制。 知识点1:JavaScript绘制曲线 JavaScript可以使用 ...
总的来说，这个“ios程序绘制饼图的demo”涵盖了iOS开发中的图形绘制、数据可视化、自定义视图、手势识别和动画效果等多个方面，是学习和实践iOS图形编程的一个良好实例。开发者通过学习和研究这个Demo，可以掌握...
在开始绘制饼图之前，需要安装必要的库，包括 Python 和 Matplotlib。使用 pip install matplotlib 命令可以轻松地安装 Matplotlib 库。 二、pie() 函数常见参数 Matplotlib 库提供了 pie() 函数来绘制饼图，该...
3. **创建Pie对象**：使用`Pie`类创建一个饼图实例，并传入标签和值。 ```python pie = ( Pie() .add( series_name="数据", data=list(zip(labels, values)), radius=["50%", "70%"], center=["50%", "60%"],...
首先，我们需要一个可以用于绘制饼图的库。Android本身并不直接支持饼图的绘制，但有许多开源库可以帮助我们实现这一目标，如`MPAndroidChart`。这个库功能强大，易于使用，支持多种图表类型，包括饼图。 安装`...
6. **绘制饼图**：WebChart会自动绘制饼图，无需像直方图那样手动绘制图形。 在VS2005中，你可以直接运行项目，查看并测试这些图表的实现效果。WebChart控件的强大之处在于其灵活性和可定制性，允许开发者根据需求...
`drawSlice()`函数是关键，它负责绘制饼图的每一部分。我们可以使用`ctx.beginPath()`开始一条路径，然后使用`ctx.arc()`绘制圆弧，`ctx.fillStyle`设置填充色，最后`ctx.fill()`填充颜色。为了实现动画效果，可以在...
- 动画效果：通过时间间隔逐步绘制饼图切片，增加视觉吸引力。 - 鼠标悬停效果：检测鼠标位置，显示切片详情或高亮选中切片。 - 文本标注：在每个切片旁添加标签，显示类别名称或百分比。 - 颜色映射：根据数据...
3. **绘制饼图** 饼图常用于显示各部分占总体的比例。在C#中，我们首先计算各个扇区的中心角度，然后使用`DrawPie`方法绘制。该方法需要弧度起始点、结束点和圆心坐标等参数。饼图的标签和百分比可以额外用`...
1. **PieView类**：这是核心的视图类，负责绘制饼图。它可能包含了计算扇形角度、绘制扇形、添加标签等功能。在Swift或Objective-C中，通常会继承自UIView，并重写drawRect方法进行自定义绘制。 2. **数据模型**：...
4. 绘制饼图：调用Zegraph的绘制方法，将数据转换为图形。 接着，我们来看看柱状图。柱状图是用垂直或水平的条形长度来表示数据大小的图表。在Zegraph中创建柱状图可能涉及以下步骤： 1. 创建Zegraph实例，配置横轴...
VC++ 利用MSchart输出柱状图、拆线图、饼图实例 MSChart是微软推出的基于图形显示的ActiveX控件，可以用来绘制各种数字统计图表。比如折线图、柱状图和饼状图等，本小例子就是VC++利用MSchart输出柱状图、拆线图等...
最近在搞绘图方面的工作，说实话C++的第三方绘图库并不算多，有：qtcharts、ChartDirector、qwt、kdchart和QCustomPlot。这几个库各有利弊。在网上找了个实例，上传给大家共享。
绘制复合饼图的辅助图.xlsx源码EXCEL VBA宏编程xlsx实例代码下载绘制复合饼图的辅助图.xlsx源码EXCEL VBA宏编程xlsx实例代码下载绘制复合饼图的辅助图.xlsx源码EXCEL VBA宏编程xlsx实例代码下载绘制复合饼图的辅助图...
在本文中，我们将深入探讨如何使用JavaScript来绘制饼图，这是一种常见的数据可视化方式，尤其适用于显示各部分占整体比例的情况。 首先，我们需要准备一个HTML文件，其中包含一个`<canvas>`元素，这是JavaScript...
本文将详细讲解如何使用Objective-C来实现饼图的绘制，主要聚焦于名为`XYPieChart`的开源库。 `XYPieChart`是专为iOS设计的一个轻量级的饼图组件，它允许开发者轻松地在应用中添加自定义的饼图视图。这个库的核心...
软件介绍： VC++利用MSchart输出柱状图、拆线图、饼图实例04439392MSChart是微软推出的基于图形显示的ActiveX控件，可以用来绘制各种数字统计图表。比如折线图、柱状图和饼状图等，本小例子就是VC++利用MSchart输出...
本文是从matplotlib官网上摘录下来的一个实例，实现的功能是Python+matplotlib绘制自定义饼图作为散点图的标记，具体如下。 首先看下演示效果 实例代码： import numpy as np import matplotlib.pyplot as plt # ...