Графики и диаграммы

Two.js — это мощная библиотека для рисования двумерной графики в браузере на базе HTML5 Canvas, SVG и WebGL. Она предоставляет удобный API для создания динамических визуализаций, включая графики и диаграммы. В основе работы с Two.js лежат объекты сцен и геометрические фигуры, которые можно программно управлять и анимировать.

Создание сцены

Для начала необходимо создать экземпляр объекта Two и прикрепить его к контейнеру на странице:

const elem = document.getElementById('drawing');
const two = new Two({ width: 800, height: 600 }).appendTo(elem);

Ключевые параметры:

  • width и height — размеры холста.
  • appendTo — DOM-элемент, в который вставляется канвас.
  • Two.js автоматически выбирает рендерер (Canvas, SVG или WebGL) в зависимости от браузера.

После создания сцены можно добавлять фигуры и управлять их свойствами.

Построение координатной сетки

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

const gridSize = 50;
for (let x = 0; x <= two.width; x += gridSize) {
  two.makeLine(x, 0, x, two.height).stroke = '#ccc';
}
for (let y = 0; y <= two.height; y += gridSize) {
  two.makeLine(0, y, two.width, y).stroke = '#ccc';
}
two.update();
  • Используется метод makeLine(x1, y1, x2, y2).
  • Свойство stroke задаёт цвет линии.
  • Вызов two.update() применяет все изменения на холсте.

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

Для создания линейного графика применяется объект Path:

const data = [10, 50, 30, 80, 60];
const path = two.makePath();

data.forEach((value, index) => {
  path.vertices.push(new Two.Anchor(index * 100, two.height - value));
});

path.noFill();
path.stroke = '#007acc';
path.linewidth = 2;

two.update();
  • vertices — массив точек, через которые проходит линия.
  • noFill() убирает заливку.
  • stroke и linewidth управляют цветом и толщиной линии.

Для плавной анимации можно использовать встроенные свойства анимации Two.js:

two.bind('upd ate', function(frameCount) {
  path.vertices.forEach((v, i) => {
    v.y = two.height - (data[i] + Math.sin(frameCount * 0.05 + i) * 20);
  });
}).play();
  • bind('update', callback) позволяет обновлять координаты в реальном времени.
  • play() запускает анимацию сцены.

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

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

const barWidth = 40;
data.forEach((value, index) => {
  const rect = two.makeRectangle(index * 100 + barWidth / 2, two.height - value / 2, barWidth, value);
  rect.fill = '#ff6f61';
  rect.noStroke();
});

two.update();
  • Позиционирование осуществляется через центр прямоугольника.
  • fill задаёт цвет заливки.
  • noStroke() убирает контур.

Круговые диаграммы

Two.js позволяет создавать сектора с помощью makePath или makePolygon с большим числом вершин:

const pieData = [30, 70, 50];
const total = pieData.reduce((a, b) => a + b, 0);
let startAngle = 0;

pieData.forEach(value => {
  const endAngle = startAngle + (value / total) * Math.PI * 2;
  const vertices = [];
  const centerX = 400, centerY = 300, radius = 100;

  vertices.push(new Two.Anchor(centerX, centerY));
  for (let angle = startAngle; angle <= endAngle; angle += 0.01) {
    vertices.push(new Two.Anchor(centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius));
  }

  const sector = two.makePath(vertices, true);
  sector.fill = `hsl(${Math.random() * 360}, 70%, 60%)`;
  sector.noStroke();

  startAngle = endAngle;
});

two.update();
  • Генерация вершин происходит по формуле окружности.
  • Параметр true в makePath замыкает путь.
  • hsl позволяет задавать разнообразные цвета динамически.

Подписи и легенды

Для графиков и диаграмм важны текстовые элементы:

const label = two.makeText('Рост продаж', 400, 50);
label.fill = '#333';
label.size = 24;
  • makeText(text, x, y) создаёт текст в заданной позиции.
  • size и fill управляют размером и цветом шрифта.

Анимация и интерактивность

Two.js интегрируется с событиями DOM и позволяет динамически менять визуализацию:

document.getElementById('updateButton').addEventListener('click', () => {
  data.push(Math.random() * 100);
  path.vertices.push(new Two.Anchor(data.length * 100, two.height - data[data.length - 1]));
  two.update();
});
  • Изменение массива данных автоматически отражается на графике.
  • Поддержка drag & drop, hover и других событий достигается через обработчики JavaScript.

Советы по оптимизации

  • Использовать меньшее количество вершин для круговых диаграмм, чтобы ускорить рендер.

  • Применять noStroke() для заливок без контуров.

  • Для больших данных использовать Canvas или WebGL рендер, а не SVG.

  • Группировать элементы с Two.Group для совместного управления положением или свойствами.

  • Two.Group позволяет объединять несколько фигур и перемещать их как единое целое:

const group = two.makeGroup(rect1, rect2, rect3);
group.translation.se t(50, 50);
two.update();
  • Применение анимации к группам упрощает сложные динамические диаграммы.

Итоговая структура

В совокупности эти элементы позволяют создавать:

  • Линейные графики с динамическими точками.
  • Столбчатые диаграммы с анимацией изменения данных.
  • Круговые и секторные диаграммы с интерактивными легендами.
  • Смешанные графики, комбинируя линии, прямоугольники и текстовые подписи.

Two.js предоставляет гибкий API для построения всех типов визуализаций, сохраняя при этом возможность анимации и интерактивного взаимодействия без внешних библиотек.

Оглавление