正文

昨天我们分享了一款基于HTML5的线性图表应用，效果非常不错，可以看在线DEMO或者实现教程。今天我们继续来分享一款基于HTML5的网页图表，它也是利用Canvas绘制的，但是和前面不同的是，这款图表是饼状图，并且我们可以点击右侧的表格来选中激活当前的图表数据，具体效果可以看DEMO演示。

你也可以在这里查看在线演示

下面是实现的过程及源码，一起分享给大家。

HTML代码： 脚本素材下载量jquery图片特效1862.12jquery导航菜单1316.00jquery选项卡特效712.49jquery文字特效3236.27jquery表单特效6122.06html5特效128.11html5 图表245.55

HTML代码有两部分，第一部分是一个canvas标签，我们的饼状图就在这里绘制。另一部分是右侧的数据分类表格，点击表格的行就可以选中并激活图表中对应的数据块。

接下来是CSS代码： *{margin:0;padding:0;list-style-type:none;} a{ :focus{outline:0;} label{cursor:pointer;} img{vertical-align:middle;} table{empty-cells:show;border-collapse:collapse;border-spacing:0;} h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;} abbr,acronym{border:0;font-variant:normal} address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit} input,button,textarea,select{*font-size:100%} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#4183C4;text-decoration:underline;} .clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{ *html .clearfix{height:1%;} .clearfix{ *+html .clearfix{min-height:1%;} body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;} .shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;} *html,*html body {background-image:url(about:blank);background-attachment:fixed;} *html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));} .shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;} .shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";} .shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;} .shortcut a:hover{background:#fff;} .shortcut span.right{float:right;} .shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;} .headeline{height:40px;overflow:hidden;} .adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;} .adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}