高级圆圈显示百分比

Question

如何制作显示特定百分比的圆圈？请参阅http://humblebee.se/this-is-humblebee/emil/。

我从另一个问题看到this回答，但我认为这是非常难编码的。我想从html-data属性设置百分比以便快速开发。

使用jQuery可能会更容易吗？

Answer 1

您提供的答案没有错，实际上您可以看到您必须使用的唯一参数是：

-webkit-transform:rotate(-55deg);

示例唯一的问题是，它只使用ID，您应该使用类和容器的唯一ID进行混合。

如果您使用JQuery，那么您可以读取内部div的值并相应地调整值，其中100％= 360度，因此每百分比3.6度。

Answer 2

你必须下载并安装饼图js库，

并添加脚本：

<script type="text/javascript">
$(function() {
    $('.chart').easyPieChart({
        //your configuration goes here
    });
});
</script>

或像其他DEMO

一样