В этой статье я покажу, как нарисовать дугу или участок окружности круга с помощью 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