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

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

Для построения линейного графика в Snap.svg используются базовые элементы <svg>, path, а также методы библиотеки для создания и анимации линий.

Создание канвы для графика

Первым шагом является создание SVG-контейнера, на котором будет отображаться график:

var s = Snap(800, 400); // создаём канву 800x400 пикселей

Здесь Snap(ширина, высота) создаёт элемент <svg> указанного размера и помещает его в тело документа. Все графические элементы графика будут добавляться на эту канву.

Построение линии графика через <path>

Линейный график строится с помощью элемента path, который описывает последовательность координат и соединяет их линиями. Основные команды пути в Snap.svg:

  • M x y — переместиться в точку (x, y) без рисования линии
  • L x y — провести линию к точке (x, y)
  • C x1 y1, x2 y2, x y — кривая Безье третьего порядка

Пример создания простого линейного графика:

var linePath = "M 50 350 L 150 200 L 250 300 L 350 150 L 450 250";
var line = s.path(linePath).attr({
    stroke: "#1E90FF",
    strokeWidth: 2,
    fill: "none"
});
  • stroke задаёт цвет линии.
  • strokeWidth — толщину линии.
  • fill: none отключает заливку, так как график состоит только из линии.

Использование массива данных для генерации линии

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

var data = [300, 250, 320, 180, 260, 200];
var pathStr = "M 50 " + (400 - data[0]);

for (var i = 1; i < data.length; i++) {
    pathStr += " L " + (50 + i * 100) + " " + (400 - data[i]);
}

var line = s.path(pathStr).attr({
    stroke: "#FF4500",
    strokeWidth: 3,
    fill: "none"
});
  • Координата y перевернута (400 - data[i]), чтобы линии шли снизу вверх, как в традиционных графиках.
  • Каждая точка отстоит по горизонтали на фиксированное расстояние (i * 100).

Добавление точек на линии

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

data.forEach(function(value, i) {
    s.circle(50 + i * 100, 400 - value, 5).attr({
        fill: "#FF6347",
        stroke: "#000",
        strokeWidth: 1
    });
});
  • s.circle(x, y, r) создаёт кружок с радиусом r.
  • fill задаёт цвет заливки точки.
  • stroke и strokeWidth создают обводку.

Анимация линии графика

Snap.svg позволяет анимировать графики, например, постепенное появление линии. Для этого используется метод animate():

var totalLength = line.getTotalLength();
line.attr({
    strokeDasharray: totalLength,
    strokeDashoffset: totalLength
});

line.animate({ strokeDashoffset: 0 }, 2000, mina.easeinout);
  • getTotalLength() вычисляет длину линии.
  • strokeDasharray и strokeDashoffset позволяют создавать эффект “рисования линии”.
  • animate() постепенно изменяет свойства за указанное время (в данном случае 2000 мс).

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

Для графиков важно добавить координатные оси и сетку:

// Горизонтальная ось
s.line(50, 400, 650, 400).attr({ stroke: "#000", strokeWidth: 2 });

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

// Горизонтальная сетка
for (var y = 100; y < 400; y += 50) {
    s.line(50, y, 650, y).attr({ stroke: "#ccc", strokeWidth: 1 });
}

// Вертикальная сетка
for (var x = 150; x <= 650; x += 100) {
    s.line(x, 50, x, 400).attr({ stroke: "#ccc", strokeWidth: 1 });
}
  • Горизонтальная и вертикальная сетка создаёт ориентир для значений.
  • Толщина и цвет линий сетки можно настроить для контраста с основной линией графика.

Динамическое обновление данных

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

function updateGraph(newData) {
    var newPath = "M 50 " + (400 - newData[0]);
    for (var i = 1; i < newData.length; i++) {
        newPath += " L " + (50 + i * 100) + " " + (400 - newData[i]);
    }
    line.animate({ d: newPath }, 1000, mina.easeinout);
}
  • Метод animate({ d: newPath }) плавно изменяет путь линии на новые координаты.
  • Это позволяет создавать динамические линейные графики с обновлением данных в реальном времени.

Настройка стиля и визуального оформления

Snap.svg предоставляет множество атрибутов для стилизации графика:

  • stroke-linecap: round | square | butt — форма концов линии
  • stroke-linejoin: round | bevel | miter — форма соединений
  • stroke-dasharray — пунктирная линия
  • opacity — прозрачность линии

Пример с пунктирной линией и мягкими концами:

line.attr({
    stroke: "#32CD32",
    strokeWidth: 4,
    strokeDasharray: "10,5",
    strokeLinecap: "round",
    strokeLinejoin: "round"
});

Совмещение нескольких линий

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

var data2 = [180, 220, 260, 200, 300, 240];
var path2 = "M 50 " + (400 - data2[0]);
for (var i = 1; i < data2.length; i++) {
    path2 += " L " + (50 + i * 100) + " " + (400 - data2[i]);
}
s.path(path2).attr({
    stroke: "#1E90FF",
    strokeWidth: 2,
    fill: "none"
});
  • Каждая линия может иметь свой цвет, стиль и толщину.
  • Легко комбинировать с анимацией и точками для более информативных графиков.

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

Оглавление