HTML5作图饼图实例（二）
日期：2014-05-17 浏览次数：21024 次
HTML5绘制饼图实例（二）
本文接上一讲继续来说明
我们继续来制作饼图示例，结合CSS3。先说一下需求，就是一个展示的页面，用饼图来展示数据，下方给出各个扇形的含义，最后给一个按钮点击进入详情。饼图的上方有标题和简单的文字介绍，这些内容竖式结构，页面上显示散列，就是这么简单。
我们首先来设置背景样式，用CSS3的渐变，那么首先页面代码需要先修改，我们一步一步来，首先看下HTML代码：
这样，我们就得到了一个渐变的背景，并且对webkit内核和moz内核的浏览器都可用，同时设置没有滚动条。好，下面来设置显示的区域，加入渐变，那么我们将HTML代码修改如下：
就是在内部加入了一个div层，那么相应的CSS代码如下：
因为我们要做层次的效果，且层间不能干扰，我们使用了绝对定位，同时设置属性，这里还加入了圆角矩形的设置，圆角半径为12px，最后设置渐变效果opacity为0.5，那么效果大家自己去看，我们继续来做：
很简单，加了一个div，设置class为panel，那么CSS为：
也是用了渐变的背景，然后设置长宽和位置，加上圆角矩形，根据外层背景的长和宽，我们预留的渐变边框为25px，那么内层的各个属性我们也不难算出来，那么我们就得到了现在的效果：
底板基本都做好了，我们就开始往里面填充内容吧，首先是HTML：
要放置这三个块了，就设置三个层，然后进行样式处理：
这里我留下了border属性，就是为了测试时定位用的，那么现在我们得到了这样的效果：
下面就是对这三块中的内容进行填充了，我们讲解一块，其它三个都是类似的，很简单，首先我们设置标题title和副标题subTitle：，放到section1中：
样式代码如下：
现在的效果为：
本文接上一讲继续来说明
我们继续来制作饼图示例，结合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;
}现在的效果为：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
