canvas教程

基于HTML5 Canvas的饼状图表实现教程

字号+ 作者:H5之家 来源:H5之家 2017-01-21 08:00 我要评论( )

基于HTML5 Canvas的饼状图表实现教程,昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程。今天我们继续来分享一款基于HTML

正文

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

html5-canvas-pie-chart

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

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

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;}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 学习总结(四)canvas绘图 WebGL SVG

    HTML5 学习总结(四)canvas绘图 WebGL SVG

    2017-01-21 08:02

  • Print Canvas element with jqprint

    Print Canvas element with jqprint

    2017-01-20 12:01

  • HTML canvas to blob to downloadable file in IE9, 10

    HTML canvas to blob to downloadable file in IE9, 10

    2017-01-20 10:00

  • 将HTML5 Canvas的内容保存为图片 图文全成

    将HTML5 Canvas的内容保存为图片 图文全成

    2017-01-20 09:01

网友点评