Интерактивные диаграммы

SVG.js предоставляет мощный инструмент для создания и управления векторной графикой в браузере через JavaScript. Основой интерактивной диаграммы является сочетание элементов SVG, динамического изменения их свойств и обработки событий пользователя.

Создание холста и базовых элементов

Для начала необходимо создать контейнер SVG. В SVG.js это делается с помощью метода SVG():

const draw = SVG().addTo('body').size(600, 400);

Здесь 600 и 400 — размеры холста. На этом холсте можно размещать любые элементы: прямоугольники, линии, круги, текст и группы элементов.

Пример добавления базового элемента:

const rect = draw.rect(100, 50).fill('#3498db').move(50, 50);
  • rect(100, 50) — размеры прямоугольника.
  • fill('#3498db') — заливка.
  • move(50, 50) — позиция на холсте.

Использование групп для структурирования

Группы позволяют объединять элементы и управлять ими как единым объектом:

const group = draw.group();
group.add(draw.circle(40).fill('#e74c3c').move(10, 10));
group.add(draw.rect(60, 30).fill('#2ecc71').move(50, 10));

Это удобно для создания сложных диаграмм, где каждый компонент можно перемещать или анимировать одновременно.

Добавление текста и меток

Для отображения данных необходимо добавлять текстовые элементы:

const label = draw.text('50%').move(70, 20).font({ size: 14, family: 'Arial', fill: '#2c3e50' });

Текст можно комбинировать с фигурами, помещая его в группы и синхронизируя позицию с графическими элементами.

Создание столбчатой диаграммы

Столбчатая диаграмма строится из прямоугольников, высота которых зависит от данных:

const data = [80, 120, 60, 150, 100];
data.forEach((value, index) => {
    draw.rect(40, value)
        .fill('#2980b9')
        .move(60 * index + 20, 200 - value);
});
  • 60 * index + 20 — горизонтальное смещение каждого столбца.
  • 200 - value — вертикальное смещение, чтобы столбцы росли вверх.

Обработка событий

SVG.js поддерживает события, позволяя сделать диаграмму интерактивной:

rect.on('mouseover', () => rect.fill({ color: '#f1c40f' }));
rect.on('mouseout', () => rect.fill({ color: '#3498db' }));
rect.on('click', () => alert('Столбец выбран!'));
  • mouseover и mouseout для подсветки.
  • click для взаимодействия с пользователем.

Анимация элементов

Анимация позволяет визуально отображать изменения данных:

rect.animate(1000, '<>').height(150).move(50, 50);
  • 1000 — длительность в миллисекундах.
  • '<>' — easing (плавное ускорение и замедление).

Можно комбинировать анимацию с событиями для динамических диаграмм.

Линейные графики

Линейные графики строятся с помощью polyline:

const points = [[0, 200], [50, 150], [100, 100], [150, 50], [200, 80]];
const line = draw.polyline(points).fill('none').stroke({ width: 2, color: '#c0392b' });

Каждая точка определяется координатами [x, y]. Линия соединяет все точки по порядку. Можно добавлять анимацию для изменения линии при обновлении данных:

line.animate(800).plot([[0,200],[50,180],[100,90],[150,40],[200,70]]);

Интерактивные подсказки

Для интерактивности полезно отображать подсказки с данными при наведении:

const tooltip = draw.text('').font({ size: 12, fill: '#fff' }).hide();

rect.on('mousemove', (event) => {
    tooltip.text(`Значение: ${value}`).show().move(event.offsetX + 10, event.offsetY - 10);
});
rect.on('mouseleave', () => tooltip.hide());
  • hide() и show() управляют видимостью.
  • event.offsetX/Y обеспечивает позиционирование относительно курсора.

Масштабирование и прокрутка

Для больших диаграмм используют группы и трансформации:

const chartGroup = draw.group();
chartGroup.add(draw.rect(40, 100).fill('#16a085').move(10, 100));
chartGroup.scale(1.5, 1.5);
chartGroup.move(50, 50);

Методы scale и move позволяют изменять размер и положение всей группы без изменения отдельных элементов.

Вывод

Используя SVG.js, интерактивные диаграммы строятся из элементов, групп, текста, событий и анимаций. Библиотека обеспечивает гибкое управление каждым элементом, позволяет добавлять динамику, подсказки и реакции на действия пользователя. Комбинация этих инструментов позволяет создавать как простые, так и сложные интерактивные визуализации данных.

Оглавление