`
mutongwu
  • 浏览: 448689 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

css3的饼图

 
阅读更多
来自：http://atomicnoggin.ca/test/pie-chart.html 

<!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>Pure CSS3 Pie Charts</title>
<style>
body {
	font-family:Tahoma, Geneva, sans-serif;
}
h2 {
	text-align:center;
}
.chart {
	position:relative;
	width:500px;
	height:250px;
}
.hold {
	position:absolute;
	width:200px;
	height:200px;
	clip:rect(0px,200px,200px,100px);
	left:300px;
}
.pie {
	position:absolute;
/*	width:100px;
	height:200px;
	-moz-border-radius:100px 0 0 100px;
	-webkit-border-radius:100px 0 0 100px; 
	border-radius:100px 0 0 100px;
	-moz-transform-origin:right center;
	-webkit-transform-origin:right center;
	transform-origin:right center; */
	width:200px;
	height:200px;
	clip:rect(0px,100px,200px,0px);
	-moz-border-radius:100px;
	-webkit-border-radius:100px; 
	border-radius:100px; 
}
.hold.gt50 {
	clip:rect(auto, auto, auto, auto);
}
.pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
}
.legend {
	clear:left;
	float:left;
	font-size:12px;
	border:2px solid grey;
	padding:5px;
	width:200px;
}
.legend DIV {
	margin:3px 0;
}
.legend span {
	float:right;
	padding-left:.5em;
}
#browse-FF {
	margin-left:10px;
	margin-top:-10px;
}
#browse-FF .pie {
	background-color:orange;
	border-color:orange;
	-moz-transform:rotate(116.28deg);
	-webkit-transform:rotate(116.28deg);
	-o-transform:rotate(116.28deg);
	transform:rotate(116.28deg);
}
#browse-FF-lbl {
	border-left:orange solid 1em;
	padding-left:.5em;
}
#browse-IE {
	-moz-transform:rotate(116.28deg);
	-webkit-transform:rotate(116.28deg);
	-o-transform:rotate(116.28deg);
	transform:rotate(116.28deg);
}
#browse-IE .pie {
	background-color:blue;
	border-color:blue;
	-moz-transform:rotate(109.8deg);
	-webkit-transform:rotate(109.8deg);
	-o-transform:rotate(109.8deg);
	transform:rotate(109.8deg);
}
#browse-IE-lbl {
	border-left:blue solid 1em;
	padding-left:.5em;
}
#browse-Safari {
	-moz-transform:rotate(226.08deg);
	-webkit-transform:rotate(226.08deg);
	-o-transform:rotate(226.08deg);
	transform:rotate(226.08deg);
}
#browse-Safari .pie {
	background-color:purple;
	border-color:purple;
	-moz-transform:rotate(10.08deg);
	-webkit-transform:rotate(10.08deg);
	-o-transform:rotate(10.08deg);
	transform:rotate(10.08deg);
}
#browse-Safari-lbl {
	border-left:purple solid 1em;
	padding-left:.5em;
}
#browse-Chrome {
	-moz-transform:rotate(236.16deg); 
	-webkit-transform:rotate(236.16deg); 
	-o-transform:rotate(236.16deg); 
	transform:rotate(236.16deg); 
}
#browse-Chrome .pie {
	background-color:darkcyan;
	border-color:darkcyan;
	-moz-transform:rotate(6.12deg); 
	-webkit-transform:rotate(6.12deg); 
	-o-transform:rotate(6.12deg); 
	transform:rotate(6.12deg); 
}
#browse-Chrome-lbl {
	border-left:darkcyan solid 1em;
	padding-left:.5em;
}
#browse-Other {
	-moz-transform:rotate(242.28deg); 
	-webkit-transform:rotate(242.28deg); 
	-o-transform:rotate(242.28deg); 
	transform:rotate(242.28deg); 
}
#browse-Other .pie {
	background-color:salmon;
	border-color:salmon;
	-moz-transform:rotate(5.76deg); 
	-webkit-transform:rotate(5.76deg); 
	-o-transform:rotate(5.76deg); 
	transform:rotate(5.76deg); 
}
#browse-Other-lbl {
	border-left:salmon solid 1em;
	padding-left:.5em;
}
#browse-Unknown {
	-moz-transform:rotate(248.04deg);
	-webkit-transform:rotate(248.04deg); 
	-o-transform:rotate(248.04deg); 
	transform:rotate(248.04deg); 
}
#browse-Unknown .pie {
	background-color:grey;
	border-color:grey;
	-moz-transform:rotate(111.96deg); 
	-webkit-transform:rotate(111.96deg); 
	-o-transform:rotate(111.96deg);
	transform:rotate(111.96deg);
}
#browse-Unknown-lbl {
	border-left:grey solid 1em;
	padding-left:.5em;
}
#os-Win {
	margin-left:10px;
	margin-top:10px;
}
#os-Win .pie {
	background-color:blue;
	border-color:blue;
	-moz-transform:rotate(229.32deg); 
	-webkit-transform:rotate(229.32deg); 
	-o-transform:rotate(229.32deg);
	transform:rotate(229.32deg);
}
#os-Win-lbl {
	border-left:blue solid 1em;
	padding-left:.5em;
}
#os-Mac {
	-moz-transform:rotate(229.32deg); 
	-webkit-transform:rotate(229.32deg);
	-o-transform:rotate(229.32deg); 
	transform:rotate(229.32deg); 
}
#os-Mac .pie {
	background-color:purple;
	border-color:purple;
	-moz-transform:rotate(21.6deg); 
	-webkit-transform:rotate(21.6deg);
	-o-transform:rotate(21.6deg); 
	transform:rotate(21.6deg); 
}
#os-Mac-lbl {
	border-left:purple solid 1em;
	padding-left:.5em;
}
#os-Other {
	-moz-transform:rotate(250.92deg); 
	-webkit-transform:rotate(250.92deg); 
	-o-transform:rotate(250.92deg); 
	transform:rotate(250.92deg); 
}
#os-Other .pie {
	background-color:grey;
	border-color:grey;
	-moz-transform:rotate(109.44deg); 
	-webkit-transform:rotate(109.44deg); 
	-o-transform:rotate(109.44deg); 
	transform:rotate(109.44deg); 
}
#os-Other-lbl {
	border-left:grey solid 1em;
	padding-left:.5em;
}
</style>
</head>
<body>
<div class="chart">
  <h2>Browser Usage</h2>
  <div class="legend">
    <div id="browse-FF-lbl">Firefox <span>32.3%</span></div>
    <div id="browse-IE-lbl">Internet Explorer <span>30.5%</span></div>
    <div id="browse-Safari-lbl">Safari <span>2.8%</span></div>
    <div id="browse-Chrome-lbl">Chrome <span>1.7%</span></div>
    <div id="browse-Other-lbl">Other <span>1.6%</span></div>
    <div id="browse-Unknown-lbl">Uknown <span>31.1%</span></div>
  </div>
  <div id="browse-IE" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-FF" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Safari" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Chrome" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Other" class="hold">
    <div class="pie"></div>
  </div>
  <div id="browse-Unknown" class="hold">
    <div class="pie"></div>
  </div>
</div>
<div class="chart">
  <h2>Operating System</h2>
  <div class="legend">
    <div id="os-Win-lbl">Windows <span>63.7%</span></div>
    <div id="os-Mac-lbl">Macintosh <span>6.0%</span></div>
    <div id="os-Other-lbl">Other<span>30.4%</span></div>
  </div>
  <div id="os-Win" class="hold gt50">
    <div class="pie"></div>
    <div class="pie fill"></div>
  </div>
  <div id="os-Mac" class="hold">
    <div class="pie"></div>
  </div>
  <div id="os-Other" class="hold">
    <div class="pie"></div>
  </div>
</div>
<p>The two charts above are created comletely with CSS3 properties and contain no images whatsoever.<br />
<a href="/blog/2010/02/20/pure-css3-pie-charts/">Back to blog post</a></p>
</body>
</html>
分享到：
| phonegap修改程序图标、名称，添加插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS实现饼图效果

    本文将详细介绍如何使用纯CSS技术来创建饼图效果，这对于那些希望在网页上展示数据且不依赖JavaScript库的开发者来说非常有用。 首先，我们需要理解饼图的基本原理：一个完整的饼图代表100%，每个扇区则代表相应的...

    3D 饼图 Pie jquery

    3. 3D变换：应用透视和旋转效果，让饼图看起来像是3D的。 4. 动画效果：在饼图加载、点击或更新时，可以使用平滑的动画过渡，提升视觉体验。 5. 可访问性：确保饼图对视力障碍或使用屏幕阅读器的用户友好，可以通过...

    饼图可加文字，js+css+html

    CSS（层叠样式表）则用于美化饼图的外观。我们可以利用CSS来调整图表的整体布局，比如设置背景色、边框、阴影等。此外，通过CSS定位技术，如绝对定位，可以精确地将文字标注放置在饼图的相应扇区上，确保视觉效果的...

    3饼图 Bar3D.zip

    标题中的“3饼图 Bar3D.zip”表明这是一个关于3D饼图的项目，而“Bar3D”可能是这个3D饼图应用或库的名字。描述中提到的内容是为了赚取积分，用户分享了一个3D饼图的实现，通过运行“index.html”文件可以看到效果。...

    Vml制作的3D饼图

    这个文件可能包含了HTML结构、CSS样式和JavaScript代码，用于绘制和操作饼图。通过查看和学习这个示例，你可以更好地理解如何利用VML创建动态、交互式的3D饼图，这对于Web开发中数据可视化的应用场景非常有价值。

    3d饼图效果特效.zip

    本资源"3d饼图效果特效.zip"是关于使用JavaScript库AmCharts实现3D圆饼图的一种特效实现。AmCharts是一款强大的JavaScript图表库，它提供了多种图表类型，包括柱状图、线图、饼图等，并支持动画效果和自定义选项。 ...

    css-pie:使用Polymer构建的即用型饼图Web组件

    “css-pie”是一个基于Polymer框架构建的Web组件，专门用于创建CSS3饼图。"Polymer"是Google开发的一个轻量级的前端框架，它允许开发者利用Web Components技术来构建可复用的自定义元素。"即用型"意味着这个组件可以...

    使用typecrpitReact3d饼图/甜甜圈图-React开发

    带有typecr图的React 3d饼图/甜甜圈图带有工具提示和打字稿的SVG 3D饼图/甜甜圈图演示https://woles.github.io/react-pie3d-demo/要求react&gt; = 16.8.0安装npm我React 3d饼图/甜甜圈带有类型提示的图表带有工具提示和...

    使用VML生成3D饼图

    CSS文件可能用于调整饼图的样式和整体布局。 学习这个示例，你可以深入理解如何利用VML和JavaScript实现动态数据可视化，同时也可以借鉴其中的技巧来创建其他类型的3D图表。需要注意的是，虽然VML在现代浏览器中...

    动态实现饼图

    对于动画效果，CSS3的`transition`和`animation`属性可以用于简单的动画实现，但在这个场景下，通常JavaScript的控制更为灵活。 在实际的项目中，饼图的每个扇区可能有不同的颜色和标签，这可以通过JavaScript动态...

    react-利用d3js绘制漂亮的React3D饼状图

    3. **计算饼图**：使用`pie3d`函数处理数据，得到每个扇区的起始角度、结束角度等信息。 4. **绘制扇区**：遍历`pie3d`返回的结果，创建`path`元素并设置其`d`属性为计算得到的弧线路径数据。同时，可以通过设置`...

    柱形图，饼图，线形图，区域图等图表

    柱形图、饼图、线形图和区域图都是最常见的图表类型，它们各自适用于不同的数据展示场景。本篇将详细介绍这些图表以及如何利用JavaScript库Highcharts来创建它们。 1. **柱形图（Bar Chart）**： 柱形图是一种用...

    用CSS画饼图

    用CSS绘制饼图，针对移动端上的展示，建议在谷歌浏览器上打开效果更佳,上传了两个html文件，pie.html是css静态画饼图，pieAuto.html是用我自己写的插件可以根据传入的参数动态绘制饼图

    饼图的demo

    3. **CSS动画**：对于简单的饼图更新，还可以利用CSS3的动画效果，动态改变扇形的角度和颜色。 编程技术细节： 1. **数据处理**：首先，你需要将数据转化为饼图所需的格式，通常包括类别名和对应的数值。 2. **初始...

    EASY饼图数据统计特效

    "EASY饼图数据统计特效"是一个针对网页开发者的资源，它提供了一种高效、直观的方式来展示数据。饼图是一种常见且易于理解的数据表示形式，尤其适用于显示部分与整体之间的关系。在这个资源中，我们主要关注的是如何...

    HTML中的3D饼状图

    1. **CSS3 3D转换**：使用`transform`属性，配合`rotateX()`, `rotateY()`, `rotateZ()`等函数，可以实现元素在X、Y、Z轴上的3D旋转，从而创建出立体感。同时，`perspective`属性设置观察者的透视角度，可以增强3D...

    JavaScript 三维报表 饼图

    HTML中的`&lt;canvas&gt;`元素常被用于绘制图形，而CSS则可以用来调整饼图的外观，如颜色、阴影和布局。 **JavaScript绘图库** 虽然可以手动编写JavaScript代码来绘制饼图，但使用绘图库可以大大简化工作。例如，D3.js库...

    动态生成投票饼图范例

    3. **图表库**：JavaScript有许多库可以简化图表的创建，例如Chart.js、Highcharts、ECharts和D3.js等。这些库提供了丰富的API和配置选项，使得开发者可以轻松地定制饼图的颜色、标签、动画效果等。例如，如果使用...

    几套HTML5+css3后台模板

    后台管理系统往往需要展示大量数据，HTML5的Canvas和SVG元素结合CSS3，可以创建各种交互式图表，如柱状图、折线图和饼图，帮助用户直观理解数据。 6. 性能优化 使用HTML5的本地存储和Web Workers特性，后台模板...

    fastreport 报表(饼图制作)

    3. **饼图系列**：在图表组件上右键单击，选择“编辑系列”来添加或修改饼图的系列。每个系列对应饼图的一个切片，你可以设置系列的名称、颜色以及它所对应的数据字段。 4. **数据绑定**：将数据集中的字段与饼图...

Magicbox
Global site tag (gtag.js) - Google Analytics