(转)浅谈HTML5与css3画饼图!
神马系饼图?
饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到。如cnzz的统计饼图
从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆。
都使用什么方法实现
目前众多站点制作饼图大多使用flash,或者后台语言生成,如PHP,Python只要安装相应的基础库就能实现画图。但很少有站点这么干,因为耗费服务器资源。
cnzz里使用的就是flash
PHP生成的
HTML5与CSS3也能画出饼图
不得不说,HTML5与CSS3的推出,将推翻老一代的网页制作者。特别在当今浏览器标准不断统一的情况下,新生的网页制作者几乎想不到在过去的时间里制作网页调兼容性是一件非常痛苦的事。
过去我们要实现圆角只能切图,如今在CSS3里只需一条代码搞定。而CSS3的功能远不止这些,配合HTML5还能画饼图数据分析。
然而,HTML5与CSS3严格意义上不具备编程语言的思想,所以还要借助JS去“画”它。
html代码
1
|
< canvas id = "bingtu" width = "224" height = "130" ></ canvas >
|
JS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var color = [ "#999999" , "#333333" , "#336799" ];
var data = [25,35,50];
function drawCircle(){
var canvas = document.getElementById( "bingtu" );
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,65);
ctx.arc(112,65,65,startPoint,startPoint-Math.PI*2*(data[i]/100), true );
ctx.fill();
ctx.stroke();
startPoint -= Math.PI*2*(data[i]/100);
}
}
drawCircle();
|
canvas是HTML5新增的画布标签,个人感觉这个标签在将来将大有用途,喜欢研究HTML5的童鞋可以深入研究这个标签。canvas上的高度可以自己随意设置,当然宽不能小于高,否则图形出来不是圆的。
这里重点讲下这段js代码用法
var color = ["#999999","#333333","#336799"]; 画饼图所用的颜色
var data = [25,35,50]; 数据比,全部是数据加起来是100,才能画满整个圆
var ctx = canvas.getContext("2d"); 画2D平面图
var startPoint= 1.5 * Math.PI; 绘制方向起点,有逆顺之分,通常是 1.5*Math.PI 或者 0
ctx.fillStyle = color[i] 填充颜色
ctx.beginPath(); 开始画
ctx.moveTo(112,65); 每次回到圆心,第一个值 112 是 canvas 宽的一半, 65是 canvas 高的一半。其实也可以利用js获取对象的宽高算出来就好,省该canvas宽高后还要去调整JS代码中的参数。
ctx.arc(...); 开始画图,前两个参数是圆心坐标,第三个参数是半径大小,第四个参数是圆周起始位置,第五个参数是弧长,就是我们圆弧的范围,Math.PI*2就是整个圆了,Math.PI是半圆,第六个参数是个布尔值,就是确定是顺时针还是逆时针,这里false是顺时针。
ctx.fill() ; 填充
ctx.stroke(); 边框
startPoint -= Math.PI*2*(data[i]/100); 画完一个善行以后,重新计算回到原点开始绘制下一扇,否则画出来的饼图拼起来就不是圆形了。
效果:
目前唯一的遗憾是还不能在图上加文字。
其它HTML5与CSS3图形统计数据示例
转载链接:http://www.qttc.net/201212255.html
转载于:https://www.cnblogs.com/anns/p/4757574.html
(转)浅谈HTML5与css3画饼图!相关推荐
- 页面显示 amp html6,浅谈HTML5 amp;amp; CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html5交互效果,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html4与html5效果,浅谈HTML5与HTML4的10个关键区别
HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站.如果你同时使用HTML4和HTML5的话,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多.虽然H ...
- float在html语言中的用法,[html5入门-4]浅谈html5中float的用法
html5的文档布局方式一般有流式布局,浮动布局,固定布局和弹性布局等几种方式,本文主要浅谈一下浮动布局在html5中的用法. 一.float定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框 ...
- 浅谈HTML5和H5区别
什么是HTML5? HTML5 是定义 HTML 标准的最新的版本. HTML5是一个新版本的HTML语言,具有新的元素,属性和行为 HTML5和H5的区别? HTML5:当前最新版本的超文本标记语言 ...
- 浅谈HTML5+css3新标签和特性
HTML5新标签与特性 什么是H5 H5并不是新的语言,而是html语言的第五次重大修改–版本 支持:所有的主流浏览器都支持h5.(chrome,firefox,safari...).IE9及以上支持 ...
- 浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
- 浅谈HTML5中canvas中的beginPath()和closePath()的重要性
beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要 先来看一小段代码: var ctx=document.getElementById("can ...
最新文章
- 自动生成存储过程的脚本
- junit rule_使用JUnit的ExpectedException和@Rule测试自定义异常
- HTML5的非主体结构元素(header、footer、hgroup、assress)
- 病毒周报(100301至100307)
- 首发骁龙8 Gen1!联想陈劲:摩托罗拉edge X将给行业扔一颗大炸弹
- 【elasticsearch】ES 单分片使用 From/Size 分页遇到重复数据
- MySql数据类型分析(字符类型) Part4
- php excel数据导出
- WAF Bypass数据库特性(Oracle探索篇)
- sns.load_dataset报错解决
- 互联网企业安全高级指南3.9 关于ISO27001
- 鸿蒙系统PC具体配置要求,原神pc电脑配置多少 原神游戏最低配置一览
- 菜鸟入坑》springboot整合mongodb问题1-Decimal128和BigDecimal的转换
- 防火墙(360天堤)双因素身份认证解决方案
- 再谈 RocketMQ broker busy(实战篇)
- 套接字是什么,套接字通信及其原理
- 使用susy内置混合宏异常:Undefined mixin ‘at-breakpoint‘
- spring boot中,使用LocalDateTime.now()相差八小时
- 百度OCPC怎么优化排名?
- 鹿晗事件一周年,微博又挂了