具有可变百分比的 CSS3 饼图

Question

在 HTML 中，我想做这样的事情：

<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”属性的示例，但不明白如何使用变量来执行此操作。如何为“pie-piece”编写 CSS？

Answer 1

如果您指的是this教程，“Hold”和“pieSlice1”只是类名和ID。

您可以预定义一个学位，然后使用 jQuery 并根据您从数据库中获得的内容更改 CSS。查看 this 帖子了解更多信息。

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

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

Answer 2

认真对待，所以回答有点延迟。

首先，使用画布绘图可能会更好地完成类似的事情（需要检查一下），但只是为了好玩，将 LESS+HTML+CSS3 和比特 JavaScript 疯狂地混合起来，这似乎仍然有效。

这是工作示例https://c9.io/dmi3y/css3pie/workspace/index.html 应该适用于所有现代浏览器和 IE9 +，可能您可以添加对低于 9 的 IE 版本的支持。为此，需要支持边框半径和变换。后一种可以使用 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() 创建 CSS

<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; 值旋转饼图。还显示带有 % 值的图例。

这几乎就是一切。有一段时间它只支持每页一个饼图（或者更确切地说是一种饼图）和一个值。稍后我会将其推送到 github 上，并且可能会在项目上工作，因为这听起来很有趣。