Столбчатые диаграммы

Snap.svg предоставляет гибкий инструмент для работы с векторной графикой на основе SVG. Построение столбчатых диаграмм начинается с создания контейнера SVG и прямоугольников, представляющих отдельные столбцы.

var s = Snap("#svgContainer"); // Контейнер SVG на странице

Для создания столбца используется элемент rect:

var rect = s.rect(x, y, width, height);
rect.attr({
    fill: "#3498db", // цвет заливки
    stroke: "#2980b9", // цвет контура
    strokeWidth: 2
});

Параметры rect:

  • x — координата левого верхнего угла по оси X.
  • y — координата левого верхнего угла по оси Y.
  • width — ширина столбца.
  • height — высота столбца (чем больше, тем выше столбец).

Масштабирование данных

Для отображения значений необходимо нормализовать данные к высоте SVG-контейнера. Например:

var data = [10, 35, 20, 50];
var maxHeight = 200;
var maxData = Math.max.apply(null, data);

var scaledData = data.map(function(d){
    return (d / maxData) * maxHeight;
});

Теперь каждая величина в scaledData соответствует высоте столбца в пикселях.

Создание сетки и осей

Для лучшей читаемости диаграммы добавляют оси X и Y:

var axisX = s.line(50, 250, 450, 250); // горизонтальная ось
axisX.attr({stroke: "#000", strokeWidth: 2});

var axisY = s.line(50, 50, 50, 250); // вертикальная ось
axisY.attr({stroke: "#000", strokeWidth: 2});

Важно: координаты SVG отсчитываются от верхнего левого угла, поэтому для построения столбцов нужно учитывать перевёрнутую ось Y.

Построение столбцов по циклу

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

var columnWidth = 40;
var spacing = 20;
scaledData.forEach(function(value, i){
    var x = 50 + i * (columnWidth + spacing);
    var y = 250 - value; // 250 — базовая линия оси X
    var rect = s.rect(x, y, columnWidth, value);
    rect.attr({fill: "#3498db"});
});

Добавление подписей к столбцам

Для отображения числовых значений сверху столбца используют элемент text:

scaledData.forEach(function(value, i){
    var x = 50 + i * (columnWidth + spacing) + columnWidth / 2;
    var y = 250 - value - 5;
    s.text(x, y, data[i]).attr({
        fontSize: 14,
        textAnchor: "middle",
        fill: "#000"
    });
});

textAnchor: "middle" центрирует текст относительно координаты X, а y сдвигается вверх для расположения над столбцом.

Добавление цветов и градиентов

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

var gradient = s.gradient("l(0,0,0,1)#3498db-#2980b9");
rect.attr({fill: gradient});

Принципы применения:

  • l — линейный градиент.
  • Параметры (x1, y1, x2, y2) задают направление.
  • Цвета разделяются дефисом.

Анимация столбцов

Snap.svg позволяет анимировать высоту столбцов, создавая эффект «вырастания»:

rect.attr({height: 0, y: 250}).animate({height: value, y: 250 - value}, 1000, mina.easeinout);

mina.easeinout обеспечивает плавное ускорение и замедление движения.

Масштабирование и динамическая генерация

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

function updateChart(data) {
    var maxData = Math.max.apply(null, data);
    scaledData = data.map(d => (d / maxData) * maxHeight);
    
    s.clear(); // очищаем предыдущие элементы
    
    scaledData.forEach(function(value, i){
        var x = 50 + i * (columnWidth + spacing);
        var y = 250 - value;
        var rect = s.rect(x, y, columnWidth, value);
        rect.attr({fill: "#3498db"});
    });
}

Дополнительные улучшения

  • Добавление сетки через line для лучшей визуальной ориентации.
  • Использование group() для объединения всех элементов диаграммы в один контейнер.
  • Поддержка интерактивности: обработчики событий click, hover для столбцов.
  • Применение переходов и задержек для последовательного появления столбцов.

Эти методы позволяют создавать полностью настраиваемые, динамичные и визуально привлекательные столбчатые диаграммы с помощью Snap.svg, управляя каждым элементом графики через JavaScript.

Оглавление