CSS3饼图可变比例

在HTML中，我愿做这样的事情：CSS3饼图可变比例

<div class="thermometer"> 
    <div class="circle purple"> 
    <div class="pie-piece percent=75%"> 
    </div> 
    </div> 
</div>

其中结果将是一个填充了75％，在紫色的圆。（同样的事情，比萨饼切成4块，和一件丢失）（75来自数据库，并且不能在CSS）

我的圈子CSS是这样的：

.thermometer .circle { 
    position: absolute; 
    width:26px; 
    height:26px; 
    -moz-border-radius:13px; 
    -webkit-border-radius:13px; 
    border-radius:13px; 
    border: 1px solid #000000; 
} 
.thermometer .green { background-color: green; } 
(other colors)

我使用“hold”和“clip”属性来查看示例，但不知道如何使用变量进行操作。我怎样才能为“饼”写CSS？

来源

2013-01-04 sploiber

如果你指的是this教程，“保持”和“pieSlice1”是类& ID的只是名称。

您可以预先定义一个度数，然后使用jQuery并根据您从数据库中获得的数据更改CSS。查看this发布了解更多信息。

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});

http://jsfiddle.net/t7zLP/1/

来源

2013-01-04 03:50:12

非常感谢！现在我有一个稍微不同的问题 - 关于将JQuery调用与类匹配。我将在一个单独的问题中发布。这工作很好！ – sploiber

却当真了，有一点延迟，这样回答。首先，使用画布绘制（需要检查它）可能会更好地完成，但仅仅为了有趣而与LESS + HTML + CSS3以及似乎无论如何都有效的JavaScript JavaScript混合在一起。

这里是工作示例https://c9.io/dmi3y/css3pie/workspace/index.html 应该适用于所有现代浏览器和IE9 +，可能您可以添加对IE版本低于9的支持。为此需要支持边界半径和变换。后者可以用Matrix过滤器来完成，这里有一些东西可以阅读，在.htc文件中加上工作解决方案http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/，但是我没有对它进行测试，个人也不会太在乎旧版浏览器。如果您想查看升级浏览器，我只需添加通知。另外在FireFox中有一些人工制品，可能是因为我使用伪类::before和::after，并且可能使用真正的元素会改善这一点。

技术信息。这里是9cloud代码https://c9.io/dmi3y/css3pie。核心思想是使用客户端LESS使用动态生成的CSS。因此，为了方便和简单，可以将jQuery代码转换为任何其他库/核心js。

里的石头：

在你的标记

你确定有多少面积应在度

<div class="circle" id="pieOne" data-fill="30deg"></div>

，基本上做它的工作原理，这是你需要的一切来填补。

这是简短的解释发生了什么事情：

以这个数值我重写LESS变量中嵌入的风格，并与less.refreshStyles()

<style type="text/less" id="lessPie"> 
    @import 'styles/pie'; 
    @fillDegree: #dataDegree#; // from 0deg to 180deg 
    @baseRotate: 40deg; 
</style> 
<script type="text/javascript"> 
    !function(){ 
     var lessPieText = $('#lessPie').text(); 
     $(function(){ 
      var pieOneDataFill = $('#pieOne').attr('data-fill'); 
      while (parseInt(pieOneDataFill) > 180) { 
       pieOneDataFill = (parseInt(pieOneDataFill) - 180) + 'deg'; 
      } 
      while (parseInt(pieOneDataFill) < 0) { 
       pieOneDataFill = (parseInt(pieOneDataFill) + 180) + 'deg'; 
      } 
      $('#lessPie').text(lessPieText.replace('#dataDegree#', pieOneDataFill)); 
      less.refreshStyles(); 

      // update % value 
      // 180deg   = 100% 
      // pieOneDataFill = x% 

      var percentValue = (parseInt(pieOneDataFill) * 100)/180; 
      $('#pieOneLegend').find('span').text(Math.floor(percentValue) + '%').end().show(); 

     }); 
    }() 
</script>

您可以用@baseRotate: 40deg;值旋转馅饼作为额外的奖金创建CSS。还显示％值的图例。

这几乎是一切。有一段时间，它只支持一个页面（或者说一个饼图）和一个值。之后我会在github上推这个，可能会在项目上工作，因为它听起来很有趣。

来源

2013-01-08 05:31:31 dmi3y

刚刚意识到你需要％值设置没有度，稍后将与LESS一起工作，一段时间可以建议快速的JavaScript转换只是simular我怎么度％转换 – dmi3y

非常感谢这么长时间的看这个！！太棒了。现在它只是一点点。我有一个更简单的版本，需要一点帮助，这是http://jsfiddle.net/sploiber/VJHcH/53/ – sploiber

欢迎您:) bw代码已经在github上https://github.com/dmi3y/css3piecharts – dmi3y

CSS3饼图可变比例

回答

相关问题