可变百分比的CSS3饼图

In HTML, I would like to do something like this:

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

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

where the result would be a 75% filled-in purple circle. (same thing as a pizza cut into 4 pieces, and one piece is missing) (The 75 comes from a database and must not be in the CSS)

结果是75%的紫色圆圈。(就像把披萨切成4块，丢了一块一样)(75块来自数据库，不能出现在CSS中)

My CSS for circle is this:

我对circle的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)

I looked at examples using "hold" and "clip" property, but didn't understand how to do it with a variable. How can I write CSS for "pie-piece"?

我查看了使用“hold”和“clip”属性的示例，但不知道如何使用变量。如何为“pie-piece”编写CSS ?

2 个解决方案

#1

If you are referring to this tutorial, the "Hold" and "pieSlice1" are just the names of the class & ID.

如果您正在参考本教程，“Hold”和“pieSlice1”只是类和ID的名称。

You could predefine a a degree then use jQuery and change the CSS depending on what you get from the database. Check out this post for some more information.

您可以预先定义一个学位，然后使用jQuery并根据从数据库中获得的内容更改CSS。查看这篇文章获得更多信息。

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

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

#2

Took it seriously, so answering with bit delay.

我很认真地对待它，所以回答的时候有点延迟。

First, possibly something like this could be done better using canvas drawing (need check it), but just for fun made crazy mix with LESS+HTML+CSS3 and bit JavaScript which seems work anyway.

首先，可以使用canvas绘图(需要检查)来更好地完成这样的工作，但是仅仅为了好玩，就会用更少的+HTML+CSS3和bit JavaScript进行疯狂的混合。

Here is working example https://c9.io/dmi3y/css3pie/workspace/index.html Should works with all modern browsers, and IE9 +, possibly you could add support to IE versions lower than 9. For this needed support for border radius and transforms. Latter one could be done with Matrix filter, and here is something to read plus working solution in .htc file http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/, but I do not tested it and personally would not care about older browsers much. I would just add notice about if you want see something upgrade browser. Also in FireFox there is some artefacts, possibly because I am using pseudo classes ::before and ::after and may be using real elements will improve this.

这里有一个工作示例https://c9.io/dmi3y/css3pie/workspace/index。html应该适用于所有现代浏览器，以及IE9 +，可能还可以为低于9的IE版本添加支持。为此需要支持边界半径和转换。后一种方法可以通过Matrix filter来实现，这里有一些可以在.htc文件http://samuli.hakoniemi.net/cross-browser- rot-transform-with- css/中阅读的附加工作解决方案，但是我没有对它进行测试，我个人也不太关心旧的浏览器。如果你想要看到升级浏览器的话，我就添加注意事项。在FireFox中也有一些人工制品，可能是因为我正在使用伪类:before和:after和may be using real element来改进这一点。

Tech information. Here is 9cloud code https://c9.io/dmi3y/css3pie. The core idea is using dynamically generated CSS using client side LESS. So with bit jQuery code which is taken for convenience and easily could be converted to any other library/core js.

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

Mile stones:

英里的石头,

in your markup you define how many area should be filled in degrees

在您的标记中，您定义应该用角度填充多少区域

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

and basically to make it works this is everything you need.

基本上来说，这就是你需要的一切。

This is brief explanation what's going on:

这是一个简单的解释:

Taking this value I do override LESS variables in embed styles and create CSS with less.refreshStyles()

使用这个值，我在嵌入样式中重写了较少的变量，并使用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>

As additional bonus you may rotate pie with @baseRotate: 40deg; value. Also shown legend with % value.

作为额外的奖励，你可以旋转派与@baseRotate: 40deg;价值。也显示具有%值的图例。

That's pretty much everything. For a while it support only one pie per page (or rather one type of pie) with one value. I will push this on github later and probably will work on project as it sounds to become interesting.

这是几乎一切。在一段时间内，它只支持一个具有一个值的饼图(或者更确切地说是一种类型的饼图)。我以后会把这个推到github上，可能会在听起来有趣的项目上进行。

#1