В этой статье я покажу, как нарисовать дугу или участок окружности круга с помощью SVG, а затем перейду к рисованию «среза пирога» или кругового сектора, чтобы дать ему правильное название. Наконец, я нарисую несколько круглых секторов, чтобы создать круговую диаграмму.
Обзор дуг SVG
Удивительно, но в SVG нет определенной формы дуги, как, например, в линиях, прямоугольниках и кругах. Однако мы можем легко создать дугу, используя путь. На самом деле это дает нам больше гибкости, поскольку мы можем комбинировать одну или несколько дуг с другими типами путей для создания сложных форм, таких как сектора, которые я продемонстрирую здесь.
В этой статье я сначала покажу, как нарисовать простую дугу, а затем создать путь, состоящий из дуги и двух линий, которые вместе образуют сектор. Наконец, я нарисую несколько секторов, чтобы сформировать круговую диаграмму.
Этот проект состоит из следующих файлов, которые вы можете клонировать/скачать из репозитория Github.
- svgarcandpieslice.html
- svgarcandpieslice.js
- app.js
HTML
Файл HTML очень прост и в основном содержит пустой элемент SVG, который мы можем нарисовать, и два файла JavaScript.
Функции для рисования дуг и секторов пирога
Файл svgarcandpieslice.js содержит две функции: одну для рисования простой дуги, а другую для рисования сектора круговой диаграммы.
рисовать дугу
Аргумент настроек — это объект со следующими свойствами:
id
— идентификатор элемента SVG для рисованияcentreX
иcentreY
— центр окружности, дугу которой мы рисуемstartAngleRadian
— начиная с позиции «3 часа»sweepAngleRadians
— угловой размер дуги- радиус — радиус окружности, дугу которой мы рисуем
fillColor
,fillOpacity
иstrokeColour
— позже мы увидим, почемуfillOpacity
так важен.
Внутри функции нам нужно создать строковое представление пути, которое мы можем добавить к элементу SVG; для этого я создал пустую строку с именем d
. Сначала мы вычисляем координаты x и y начальной и конечной точек дуги, а затем добавляем «M
» (перемещение) к пути с первой парой координат. Затем мы добавляем «A
» (дуга) с радиусом и второй парой координат.
До сих пор это должно быть простым и не требующим пояснений, но есть еще три значения, которые нуждаются в дальнейшем объяснении.
- X Axis Rotation — вращение эллипса, здесь не имеет значения, так как мы рисуем дугу окружности.
- Флаг большой дуги — если установлено значение 1, будет нарисована более длинная дуга между двумя точками. Если 0 (что я использовал), будет нарисована более короткая из двух дуг.
- Sweep Flag — если 1 (как здесь), то углы прогрессируют в положительном направлении от первой точки ко второй. Если 0, они прогрессируют в отрицательном направлении.
(Вы, наверное, заметили, что я использовал одно и то же значение для горизонтального и вертикального радиусов. Вы можете использовать разные значения для рисования дуги эллипса, и я сделаю именно это в следующей статье об орбитах планет.)
Наконец, мы создаем константу пути с именем arc
, устанавливаем необходимые атрибуты и добавляем ее к элементу SVG.
рисоватьPieSlice
Эта функция расширяет предыдущую и использует те же настройки, за исключением того, что у нас нет свойства fillOpacity
.
Единственные другие отличия в том, что мы сначала движемся к центру круга и проводим линию к краю, а затем, после того, как дуга была добавлена, мы замыкаем путь с помощью «Z
». Таким образом, первая линия, дуга и вторая линия охватывают сектор.
Пробуем
Итак, теперь у нас есть несколько функций, давайте попробуем их.
В window.onload
у нас есть три вызова функций, которые вы можете прокомментировать/раскомментировать, чтобы попробовать три другие функции.
Первый — arc
: если вы откроете svgarcandpieslice.html в своем браузере, вы увидите это. (Это очень скучно. Извините!)
В функции arc
я установил fillOpacity
на 0.0
. Если вы установите какое-то другое значение, скажем, 0.5
, вы получите это, что, вероятно, не то, что вам нужно.
В pieSlice
мы вызываем drawPieSlice
, поэтому закомментируйте arc();
в window.onload
, раскомментируйте pieSlice();
и обновите страницу. Не совсем скучный кусочек апельсинового пирога или круглый сектор.
Наконец, давайте запустим функцию pieChart
. Сначала я создал пару массивов, один для цветов и один для данных, а затем суммировал их и вычислил угол в радианах, который представляет каждую единицу данных.
Далее нам нужна пара переменных угла, одна для начального угла (как я упоминал ранее, 0 означает «три часа») и одна для угла развертки для текущего значения данных.
Наконец, мы повторяем данные. Здесь я использовал цикл for, так как нам нужен текущий индекс для массива цветов. В цикле мы вычисляем угол развертки для текущего элемента данных, вызываем drawPieSlice
, а затем добавляем sweepAngleRadians
к startAngleRadians
, чтобы следующий сектор круговой диаграммы начинался там, где заканчивался предыдущий.
Это конечный результат.
Конечно, это не полностью готовая к производству круговая диаграмма: здесь нет меток, цветовых ключей или других наворотов, но цель — просто продемонстрировать рисование секторов круговой диаграммы в SVG с использованием JavaScript.
Эта статья ранее публиковалась на CodeDrome