Создать HTML круговую диаграмму с удаленным чанком

Question

Знаете ли вы, как я мог бы создать элемент 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>

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]);
};

Проверьте это!

Answer 2

Лучшим способом будет использование SVG.Тем не менее, это также возможно с использованием CSS3-преобразований.

Вы можете прочитать о матричном преобразовании здесь: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/