可变百分比的CSS3饼状图

CSS3 pie chart with variable percentage

本文关键字：CSS3 百分比      更新时间：2023-09-26

在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"answers"clip"属性的例子，但不明白如何使用变量来做。如何为"馅饼"编写CSS ?

如果你指的是这个教程，"Hold"answers"pieSlice1"只是类&ID。

你可以预先定义一个度，然后使用jQuery和改变CSS取决于你从数据库中得到什么。查看这个帖子获取更多信息。

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
http://jsfiddle.net/t7zLP/1/

很认真，所以回复时有位延迟

首先，可能这样的事情可以做得更好，使用画布绘制(需要检查)，但只是为了好玩，使疯狂的混合LESS+HTML+CSS3和位JavaScript似乎工作。

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

科技信息。这里是9cloud代码https://c9.io/dmi3y/css3pie。核心思想是使用客户端LESS动态生成CSS。因此，使用bit jQuery代码，这是为了方便和容易地转换为任何其他库/core 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上，可能会在项目上工作，因为它听起来很有趣。

相关文章：