创建删除块的 HTML 饼图
你知道我如何创建一个如下所示的 HTML 元素吗：
我知道我可以用圆角做一个圆圈可以吗？但我怎样才能从圆圈中取出一块呢？
我无法使用的一个选项是从中制作图像，因为我实际上收到了一个描述饼图和饼图的 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>
Do you know how I could create an HTML element that looks like this:
I know I could make a circle using round corners couldn't I? But how could I take a chunk out of the circle?
One option that is not available to me is to make an image out of this, because I actually receive an xml file that describes a pie graph & I have to render it dynamically using javascript, so the pie graph will be different each time.
The website is purely for iPad, so there are no cross browser requirements. Do you know of a CSS3 or HTML5 way I can take a chunk out of the circle element? Maybe there's a Javascript library that draws these pie graphs?
My HTML that is a circle with borders but doesn't remove the chunk:
<div style="border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; color: blue; border: 3px solid green; height:45px; width: 45px;"></div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正确的方法是 SVG（可缩放矢量图形）。
有几个库可以简化工作。例如，拉斐尔。
它有一个扩展，可以更轻松地创建图表：gRaphael。
以下是饼图的示例： http://g.raphaeljs.com/piechart.html
这是该饼图的代码：
检查一下！
The way to go is SVG (scalable vector graphics).
There are several libraries that simplify work it. For example, Raphaël.
There's an extension to it, that allows for easier creation of charts: gRaphael.
Here's an example of a pie chart: http://g.raphaeljs.com/piechart.html
And here's code of that pie chart:
Check it out!
最好的方法是使用 SVG。不过，也可以使用 CSS3 转换。
您可以在此处阅读有关矩阵变换的信息： http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
The best way would be using SVG. However, it's also possible using CSS3 transforms.
You can read about the matrix transform here: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/