用CSS3做各种样式的饼图

通过css3的旋转属性来实现饼图的效果。封装了一个饼图类,通过实例化来生成各种样式的饼图。

以前一直用highcharts做饼图的效果,但有时候,一些比较简单的饼图用highcharts的话有点杀鸡用牛刀的感觉。所以自己研究了一下如何用css3来达到这个效果。并封装了一下,支持多种样式,写了一个 pie.js 。

原理是这样的,父容器是一个div,背景颜色是左边一半灰色,右边一半绿色。

里面有2个可以旋转的div,小于50%的时候,第一个div是灰色的,顺时针旋转一下就好了,即用灰色遮绿色。

如果超过50%了,则需要用到第二个绿色的div,也是顺时针旋转一下,用绿色遮盖灰色的底。

有兴趣的同学可以fork一下下面的地址看一下源码。

github传送门:http://lancer07.github.io/css3_pie/

效果 如图所示

使用也很方便,html是这样的,用data-value属性来存要显示的百分比。

然后实例化一个饼图类,可配可不配一些参数。

var myPie = new Pie({    el : ‘# colorful-pie’,  // 选择器    animite : true,        // 是否要有动画效果    ring : 0.7,            // 中间是否要空心,并设置空心的半径     color : '# ff9933'      // 自定义饼图的颜色,    number :false,         // 是否要显示中间的百分比    rotate : -40           // 设置起点角度,默认是从12点钟方向开始的});myPie.init();    // 实例化

这样就生成了一个饼状图了。

PS:
应该还有更好的方法来实现,希望大家能告诉我。多谢!

关键字:css3, jquery, css, JavaScript

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部