创建HTML饼图与块取出

你知道我怎么可以创建一个HTML元素，看起来像这样：创建HTML饼图与块取出

enter image description here

我知道我可以让使用圆角我能不能圆？但是，我怎么能从圈子中取出一块呢？

对我来说没有一个选项是将图像制作出来，因为我实际上收到了一个描述饼图的xml文件&我必须使用javascript动态呈现它，所以饼图将会每次都不一样。

该网站纯粹是为iPad，所以没有跨浏览器的要求。你知道一个CSS3或HTML5的方式，我可以从圆形元素中取出一个块吗？也许有一个Javascript库绘制这些饼图？

我的HTML是与边框的一圈，但不会删除块：

<div style="border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; color: blue; border: 3px solid green; height:45px; width: 45px;"></div>

来源

2012-01-08 Jake M

使用了合适的工具; '

最好的方法是使用SVG。但是，也可以使用CSS3转换。

您可以阅读有关矩阵变换位置：http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

来源

2012-01-09 00:11:58

看着链接。 Matrix，哦，上帝让我想起Uni我恨他们的地方。如果我走CSS3转换路径，它会涉及到很多矩阵（或者是矩阵）吗？如果是的话，我会去画布 – 2012-01-09 00:20:41

要走的路是SVG（可缩放矢量图形）。

有几个库可以简化它的工作。例如，Raphaël。

它有一个扩展，它允许更容易创建图表：gRaphael。

这里有一个饼图的例子：http://g.raphaeljs.com/piechart.html

及这里的饼图代码：

window.onload = function() { 
    var r = Raphael("holder"); 

    r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]); 
};

来看看吧！

来源

2012-01-08 23:59:40

那么，如何使用Raphael制作一个类似饼图的对象呢？ – Nightfirecat 2012-01-09 00:01:04

创建HTML饼图与块取出

回答

相关问题