ie上画圆饼图

迷南。 2022-05-31 08:47 220阅读 0赞

# 概述 #

主要运用到CSS3的transform、js、jq实现饼状图效果

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10579.html][http_www.demodashi.com_demo_10579.html] ####

#### 一、准备工作 ####

1、主要运用到CSS3的3D transform等变换

*  transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

<table style="border-spacing:0px; border-collapse:collapse; background-color:transparent"> 
 <tbody style="margin:0px; padding:0px; border:0px currentcolor"> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; width:294px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 值</th> 
 <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 描述</th> 
 <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; width:42px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 测试</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> none</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义不进行转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate&amp;p=22" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> matrix(n,n,n,n,n,n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 转换，使用六个值的矩阵。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_matrix" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translate(x,y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translate3d(x,y,z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateX(x)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义转换，只是用 X 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateY(y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义转换，只是用 Y 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateZ(z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换，只是用 Z 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scale(x,y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scale3d(x,y,z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleX(x)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 X 轴的值来定义缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scalex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleY(y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 Y 轴的值来定义缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scaley" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleZ(z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotate(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 旋转，在参数中规定角度。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotate3d(x,y,z,angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateX(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateY(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Y 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatey" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateZ(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Z 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatez" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skew(x-angle,y-angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skew" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skewX(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewx" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skewY(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Y 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewy" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> perspective(n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 为 3D 转换元素定义透视视图。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 测试</td> 
 </tr> 
 </tbody> 
</table>

2、对于圆角问题，兼容ie8，需要用到ie-css.htc这个文件。对于圆饼的实现需要运用overflow:hidden属性根据li的高度限制span标签内容的显示。

#### 二、程序实现 ####

原先我在ul标签上画一个圆并设置超出隐藏，然后在li就给饼状图所占比例的高度。但实际上是不行的，因为ul虽然在ie上显示为圆角，但是它本身还是矩形，所以超出隐藏也是按照矩形来超出隐藏，li也所会显示为一个矩形，并不能像我想象那样li变成圆饼状。  
后面我想到用li来做超出隐藏，如果是百分80%的饼状图，li的高度是ul的80%而宽度不变，在li里面加个span画一个跟ul一模一样的圆形。由于li做了超出隐藏，所以span的圆也只会跟li的高度一样，这样圆饼图就画出来了。

![4161419839-5922905335a38\_articlex.png][4161419839-5922905335a38_articlex.png]

html代码如下：

js部分代码如下：

css样式如下：

.percentage-img{
           position: relative;
           margin: 20px 0;
           border-right: solid 1px #f9f9f9;
           text-align: center;
    }
    .percentage-img>ul{
           position: relative;
           display: inline-block;
           width: 100px;
           height: 100px;
           border-radius: 100px;
           background-color: #ccc;
    }
    .percentage-img>span{
           display: inline-block;
           position: absolute;
           top: 0;
           left: 0%;
           width: 100%;
           line-height: 100px;
           text-align: center;
           font-size: 16px;
           color: #fff;
           z-index: 10;
    }

#### 三、文件、运行截图 ####

1、文件截图：

![未标题-1.jpg][-1.jpg]

双击index.html即可看到效果

2、运行效果图：

![未标题-2.jpg][-2.jpg]

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10579.html]: http://www.demodashi.com/demo/10579.html
[4161419839-5922905335a38_articlex.png]: /images/20220531/98a4922ae8554d4a9f1d96eeb9f44c64.png
[-1.jpg]: /images/20220531/a5590d23f4ba493e914e4ccbc477460e.png
[-2.jpg]: /images/20220531/e9b7019f55934be28dab72539831a117.png
[http_www.demodashi.com]: http://www.demodashi.com/