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()方法即可,我们看到如下结果:
![e0264b12-6a58-37e2-b94b-91d267cb36c2.jpg e0264b12-6a58-37e2-b94b-91d267cb36c2.jpg](http://bbs.developersky.net/data/attachment/forum/month_20118/201109100937470853.jpg)
到此为止,我们就画好扇形了,细心的人会发现,我们每个扇形连接处都有一道白线,产生的这个问题我们之前说过,就是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>
复制代码
我们再来看看效果:
![2c073fad-e873-3f9e-b364-cf46d8132773.jpg 2c073fad-e873-3f9e-b364-cf46d8132773.jpg](http://bbs.developersky.net/data/attachment/forum/month_20118/201109100937400832.jpg)
Canvas绘制饼图掌握这么多基本就够了,可以处理常见的数据统计了,只要注意这里我们扇形划分是按照百分比进行的,
那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单,调整几个参数即可。
我们继续来制作饼图示例,结合CSS3。先说一下需求,就是一个展示的页面, 用饼图来展示数据,下方给出各个扇形的含义,最后给一个按钮点击进入详情。 饼图的上方有标题和简单的文字介绍,这些内容竖式结构,页面上显示散列,就是这么简单。 我们首先来设置背景样式,用CSS3的渐变,那么首先页面代码需要先修改, 我们一步一步来,首先看下HTML代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>HTML5 Canvas Demo</title>
- <style type="text/css">
- body{
- margin:0px;
- padding:0px;
- }
- .bg{
- position:absolute;
- height:100%;
- width:100%;
- overflow-x: hidden;
- overflow-y:hidden;
- background-image: -moz-linear-gradient(top,#77D1F6, #2F368F);
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6),color-stop(1, #2F368F));
- }
- </style>
- </head>
- <body>
- </html>
复制代码
这样,我们就得到了一个渐变的背景,并且对webkit内核和moz内核的浏览器都可用, 同时设置没有滚动条。好,下面来设置显示的区域,加入渐变,那么我们将HTML代码修改如下:
- <div class="bg">
- <div class="panelBg"></div>
- </div>
复制代码
就是在内部加入了一个div层,那么相应的CSS代码如下:
- .panelBg{
- position:absolute;
- height:600px;
- width:800px;
- left:250px;
- top:20px;
- border-radius: 12px;
- background-color:#000000;
- opacity:0.5;
- }
复制代码
因为我们要做层次的效果,且层间不能干扰,我们使用了绝对定位,同时设置属性, 这里还加入了圆角矩形的设置,圆角半径为12px,最后设置渐变效果opacity为0.5, 那么效果大家自己去看,我们继续来做:
- <div class="bg">
- <div class="panelBg"></div>
- <div class="panel">
- </div>
- </div>
复制代码
很简单,加了一个div,设置class为panel,那么CSS为:
- .panel{
- position:absolute;
- height:550px;
- width:750px;
- left:275px;
- top:45px;
- border-radius: 12px;
- background-image: -moz-linear-gradient(top,#EBEBEB, #BFBFBF);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB),color-stop(1, #BFBFBF));
- }
复制代码
也是用了渐变的背景,然后设置长宽和位置,加上圆角矩形,根据外层背景的长和宽, 我们预留的渐变边框为25px,那么内层的各个属性我们也不难算出来,那么我们就得到了现在的效果: 底板基本都做好了,我们就开始往里面填充内容吧,首先是HTML:
- <div class="bg">
- <div class="panelBg"></div>
- <div class="panel">
- <div id="section1">
- </div>
- <div id="section2">
- </div>
- <div id="section3">
- </div>
- </div>
- </div>
复制代码
要放置这三个块了,就设置三个层,然后进行样式处理:
- #section1{
- border:1px solid red;
- position:relative;
- float:left;
- width:235px;
- height:530px;
- top:10px;
- left:10px;
- }
- #section2{
- border:1px solid red;
- position:relative;
- float:left;
- width:235px;
- height:530px;
- top:10px;
- left:20px;
- }
- #section3{
- border:1px solid red;
- position:relative;
- float:left;
- width:235px;
- height:530px;
- top:10px;
- left:30px;
- }
复制代码
这里我留下了border属性,就是为了测试时定位用的,那么现在我们得到了这样的效果: 下面就是对这三块中的内容进行填充了,我们讲解一块,其它三个都是类似的, 很简单,首先我们设置标题title和副标题subTitle: 放到section1中:
- <div id="section1">
- <div class="title">HTML5</div>
- <div class="subTitle">HTML5 是下一代的HTML,包含诸多新特性,比如绘制图形的canvas元素。</div>
- </div>
复制代码
样式代码如下:
- .title{
- border:1px solid red;
- position:relative;
- margin:5px;
- font-family:微软雅黑;
- font-size:22px;
- font-weight:bold;
- text-align:center;
- color:#58595B;
- }
- .subTitle{
- border:1px solid red;
- margin:5px;
- font-family:微软雅黑;
- font-size:14px;
- height:70px;
- font-weight:bold;
- text-indent:2em;
- color:#6D6E71;
- }
复制代码
现在的效果为: 接下来我们要放置配置饼图的canvas了,绘制饼图的方法之前说过,就是一段JavaScript代码, 我们只需要留出位置即可:
- <div id="section1">
- <div class="title">HTML5</div>
- <div class="subTitle">HTML5 是下一代的HTML,包含诸多新特性,比如绘制图形的canvas元素。</div>
- <div class="piechart">
- <canvas id="piechart1" width="225" height="168"></canvas>
- </div>
- </div>
复制代码
下面就是确定样式和绘制饼图了,只需调整圆心位置即可,将data数组放于方法内, 我们要设置三组data值,而color就是一组:
- .piechart{
- border:1px solid red;
- margin:5px;
- height:170px;
- }
复制代码
- <script type="text/javascript">
- var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
-
- function drawCircle(){
- var data = [5,30,15,30,20];
- var canvas = document.getElementById("piechart1");
- 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(112,84);
- ctx.arc(112,84,84,startPoint,startPoint-Math.PI*2*(data[i]/100),true);
- ctx.fill();
- ctx.stroke();
- startPoint -= Math.PI*2*(data[i]/100);
- }
- }
- drawCircle();
- </script>
复制代码
我们来看看绘制好饼图后的效果: 下面放置对饼图的介绍,也很简单,我们来看一下,将下面的代码放置到piechart的div下面:
- <div class="description">
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(119, 209, 246); "></div>
- <div class="item-text">20% Opera</div>
- </div>
- <div class="scroll-item item-odd">
- <div class="rect" style="background-color: rgb(44, 168, 224); "></div>
- <div class="item-text">30% FireFox</div>
- </div>
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(54, 102, 176); "></div>
- <div class="item-text">15% Safari</div>
- </div>
- <div class="scroll-item item-odd">
- <div class="rect" style="background-color: rgb(47, 54, 143); "></div>
- <div class="item-text">30% Chrome</div>
- </div>
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(39, 37, 95); "></div>
- <div class="item-text">5% IE</div>
- </div>
- </div>
复制代码
其中涉及到的CSS样式为:
- .description{
- border:1px solid #CCCCCC;
- border-color: #636263 #464647 #A1A3A5;
- margin:10px 5px;
- height:165px;
- border-radius: 4px;
- }
- .scroll-item {
- position: relative;
- width: 100%;
- height: 32px;
- border-bottom:1px solid gray;
- cursor: pointer;
- }
- .item-even {
- background-color: #E7E8EC;
- }
-
- .item-odd {
- background-color: #E0ECF6;
- }
- .rect {
- float: left;
- margin-top: 5px;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- border-radius: 3px;
- }
- .item-text{
- margin-left: 5px;
- height: 100%;
- float: left;
- font-size: 14px;
- font-family: 微软雅黑;
- vertical-align: middle;
- display: inline-block;
- line-height: 30px;
- }
复制代码
其中没什么可多说的,就是设置了一下奇偶行的不同颜色,因为我们都是定死的, 所以就这么来做了,比较简单,剩下就是设置长宽,圆角的样式了,不是很难, 现在我们得到了这样的效果: 还有最后的一个按钮了,也很简单了,我们如下设置,接着上面的代码,编写:
- <div class="button"><span class="buttonText">查看详情 </span></div>
复制代码
然后设置样式:
- .button{
- border:1px solid #cccccc;
- cursor:pointer;
- margin:10px 5px;
- height:40px;
- text-align:center;
- border-radius: 4px;
- border-color: #636263 #464647 #A1A3A5;
- text-shadow: 0 1px 1px #F6F6F6;
- background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));
- }
- .buttonText{
- position:relative;
- font-weight:bold;
- top:10px;
- font-family:微软雅黑;
- color:#58595B;
- }
复制代码
现在我们就完成了一组了,得到如下的效果: 比葫芦画瓢完成剩下两组,也很简单了,最后我们得到:
那么,这个例子也就做完了,主要是介绍利用Canvas绘制饼图,然后结合CSS制作一个小demo, 用于数据展示用,对浏览器要求比较高,而且基本排除了IE,暂时也就不太适合普通应用. |
|
|