javascript - 创建删除 block 的 HTML 饼图

Question

你知道我如何创建一个如下所示的 HTML 元素吗:

我知道我可以用圆 Angular 做一个圆，不是吗？但是我怎样才能从圆圈中取出一 block 呢？

我无法使用的一个选项是从中制作图像，因为我实际上收到了一个描述饼图的 xml 文件，我必须使用 javascript 动态呈现它，所以每个饼图都会不同时间。

该网站仅适用于 iPad，因此没有跨浏览器要求。你知道我可以从 circle 元素中取出一 block 的 CSS3 或 HTML5 方法吗？也许有一个绘制这些饼图的 Javascript 库？

我的 HTML 是一个带边框的圆圈，但没有删除 block :

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

Answer 1

要走的路是 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]);
};

检查一下!