HTML5 Canvas 柱形图

共4个文件

html：2个

js：2个

HTML5

Canvas

4星 · 超过85%的资源需积分: 33 57 下载量 33 浏览量 2015-11-15 11:38:19 上传评论 1 收藏 34KB RAR 举报

温馨提示

这是一个 HTML5的柱形图表，跟其他的HTML5图表类似，它也可以定义柱形的高度来表示其百分比的高低，同时当你将鼠标滑过某个柱形体时，将会显示具体的数据百分比，当让你也可以自定义其他的图表数据。另外，这款图表是基于HTML5 Canvas技术的

资源推荐

资源详情

资源评论

收起资源包目录

html5-canvas-bar-chart.rar （4个子文件）

html5-canvas-bar-chart

index.html 1KB

jquery-1.7.1.min.js 92KB

canvas.js 6KB

detail.html 330B

共 4 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 Canvas 柱形图鼠标滑过显示百分比DEMO演示</title> <style type="text/css"> #canvas{ position: relative; } #show_num{ position: absolute; z-index: 111; } .show_num{ border: 1px solid #bfbfbf; background-color: #fff; width: 90px; height: 24px; line-height: 24px; text-indent: 5px; position: relative; z-index: 0; } #show_num em{ position:absolute; bottom:-7px; left:4px; overflow:hidden; width:13px; height:13px; background:#fff; border-bottom:1px solid #bfbfbf; border-right:1px solid #bfbfbf; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); z-index: -2; } </style> </head> <body> <canvas id="canvas"></canvas> <div id="show_num"></div> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="canvas.js"></script> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>

评论收藏

内容反馈