Круговая диаграмма SVG: как рисовать круговые диаграммы неправильного размера - PullRequest
Новая
       0

Круговая диаграмма SVG: как рисовать круговые диаграммы неправильного размера

2 голосов
/ 09 января 2012

Я пытаюсь создать круговую диаграмму SVG, которая имеет 277 градусов. У меня есть некоторый код, который создает круговую диаграмму, которая выглядит правильно, но я не уверен, что мой код в первую очередь правильный (в правильных позициях) и могу ли я его улучшить.

Слеваэто круговая диаграмма, которую я пытаюсь воссоздать, справа вывод моего кода: enter image description here enter image description here

У меня такое ощущение, что моя попытка имеет центральную точку, которая находится слишком далеко вправо (где2 линии встречаются).Круг должен быть 277 градусов.Является ли мой код правильным и если нет, то как его можно исправить - что мне нужно изменить и на какие значения? 

<svg width="400" height="400">
    <path d="M200,200 h-150,-20 a150,150 0 1,0 150,-150 z"
     fill="red" stroke="blue" stroke-width="5" />
</svg>

PS: можно ли просто дать значение степени дляSVG, потому что было бы намного проще просто сказать «заполнить до 277 градусов» вместо использования триггера для фактических точек и т. Д.

Ответы [ 2 ]

3 голосов
/ 09 января 2012

Правильный путь (запустить, чтобы увидеть результат) 

<svg width="400" height="400" id='pie'>
    <path d="M200,200 L187,100 A100,100 1 1,1 100,200 z"
     fill="red" stroke="blue" stroke-width="2" />
</svg>
2 голосов
/ 07 мая 2013

Я хотел бы предложить альтернативу некоторым ответам "дуга" и "круговая диаграмма". Вы можете нарисовать легкую дугу, а затем повернуть ее в нужное положение (в градусах). Нет расчета координат. Нет плагина или утилиты.

В моем примере я создаю целый пирог. Итак, сначала создал самый большой кусок в виде круга. Затем создайте простые 90-градусные дуги в качестве других круговых сегментов. Преобразуйте и вращайте дуги, чтобы отрезать предыдущий кусок. Наконец, создайте кусок, чтобы отрезать последний (самый маленький) кусок.

В этом примере я намеренно оставил желтый сегмент коротким, чтобы красный круг просвечивал. Я мог бы легко добавить пирог второй четверти или нарисовать желтый как половину пирога (так как он был больше 90 градусов). Кроме того, если первая часть меньше 90 градусов, вы можете предварительно рассчитать, что последняя часть обложки будет меньше первой. Рисуя круговые диаграммы, я чувствую, что всегда буду иметь большой кусок, который могу отсортировать, чтобы быть первым.

В твоем случае я мог бы видеть это как две половинки пирога. Один остается на месте, другой поворачивается на нужный вам угол.

Надеюсь, это полезно. 

    <!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Create Pie Chart</title>
  <style type="text/css" media="screen">
    svg {
      display:block; border:2px solid #00c; position:relative;
      top:0%; left:0%; width:100%; height:100%; background:#fff;
    }
  </style>

</head><body>

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="300" cy="200" r="150" fill="red" stroke="black" stroke-width="1" />

<path id= "a1" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="black" stroke-width="1" transform="rotate(180 300 200)"/>
<path id= "a2" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="blue" stroke="black" stroke-width="1" transform="rotate(220 300 200)"/>
<path id= "a3" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="green" stroke="black" stroke-width="1" transform="rotate(237 300 200)"/>
<path id= "a4" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="maroon" stroke="black" stroke-width="1" transform="rotate(320 300 200)"/>
<path id= "a5" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="red" transform="rotate(400 300 200)"/>

</svg>

<script>

c = 360;

c -= 160;
 document.getElementById('a1').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 100;
 document.getElementById('a2').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 50;
 document.getElementById('a3').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 30;
 document.getElementById('a4').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 20;
 document.getElementById('a5').setAttribute("transform", "rotate(" + c + " 300 200)");

</script>
</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...