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”属性查看了示例，但不了解如何使用变量。如何为“馅饼”编写CSS？

Answer 1

如果您指的是 this 教程，则“暂停”和“pieSlice1”只是该类＆amp;的名称。 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。所以使用bit 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;值旋转饼图。还显示了带有％value的图例。

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

具有可变百分比的CSS3饼图

2 个答案: