Создание линейной диаграммы с использованием HTML5 Canvas на примере конструктора Puzzle

В этом примере мы создадим простую линейную диаграмму с помощью технологии HTML5 Canvas. Это позволяет нам визуализировать данные, используя простые графические элементы. Реализовано в конструкторе Puzzle

Начнем с основной структуры HTML-документа:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Линейная диаграмма</title> <style> /* Стили */ </style> </head> <body> <div id="chartContainer"> <canvas id="lineChart"></canvas> </div> <script> // JS-код </script> </body> </html>

Здесь мы создаем элемент <canvas> внутри контейнера с идентификатором chartContainer. Это будет область, где мы будем рисовать нашу диаграмму.

Внутри тега <style> мы задаем стили для страницы и нашего контейнера:

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } #chartContainer { width: 380px; max-width: 600px; background: white; border-radius: 10px; padding: 20px; } canvas { width: 380px; height: 200px; }

Мы используем flexbox для центрирования контейнера на странице и задаем некоторые стили для осей и фона.

Теперь перейдем к JavaScript-коду, который будет обрабатывать данные и рисовать саму диаграмму:

const dataPoints = [10, 20, 15, 25, 30, 20, 35]; // Пример данных const canvas = document.getElementById('lineChart'); const ctx = canvas.getContext('2d');

Здесь мы определяем массив dataPoints, который содержит наши данные для диаграммы. Затем получаем контекст рисования ctx для элемента canvas.

canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; const maxDataPoint = Math.max(...dataPoints); const chartHeight = canvas.height - 40; // Отступы const chartWidth = canvas.width - 40; const stepX = chartWidth / (dataPoints.length - 1); const stepY = chartHeight / maxDataPoint;

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

ctx.strokeStyle = '#e0e0e0'; ctx.lineWidth = 1; // Рисуем линии сетки for (let i = 0; i <= maxDataPoint; i += 5) { const y = chartHeight + 30 - (i * stepY); ctx.beginPath(); ctx.moveTo(10, y); ctx.lineTo(chartWidth + 10, y); ctx.stroke(); ctx.fillStyle = '#333'; ctx.fillText(i, 5, y + 5); // Подписи по оси Y }

Мы рисуем горизонтальные линии сетки и добавляем подписи по оси Y.

// Рисуем оси ctx.beginPath(); ctx.moveTo(10, 30); ctx.lineTo(10, chartHeight + 30); ctx.lineTo(chartWidth + 10, chartHeight + 30); ctx.strokeStyle = '#ccc'; ctx.stroke();

Затем мы рисуем оси X и Y для графика.

ctx.beginPath(); dataPoints.forEach((point, index) => { const x = index * stepX + 10; const y = chartHeight + 30 - (point * stepY); ctx.lineTo(x, y); }); ctx.strokeStyle = '#007AFF'; // Цвет линии ctx.lineWidth = 2; ctx.stroke();

Здесь мы создаем линию, которая соединяет все точки данных, а также рисуем точки на линии:

Этот код создаёт простую, но функциональную линейную диаграмму с использованием HTML5 и JavaScript, демонстрируя основные принципы работы с <canvas>. Документ выглядит стильно благодаря CSS, а логика построения графика достаточно проста для понимания, что делает его отличным примером для начинающих веб-разработчиков.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Линейная диаграмма</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } #chartContainer { width: 380px; max-width: 600px; background: white; border-radius: 10px; padding: 20px; } canvas { width: 380px; height: 200px; } </style> </head> <body> <div id="chartContainer"> <canvas id="lineChart"></canvas> </div> <script> // Вводим значения переменных const dataPoints = [10, 20, 15, 25, 30, 20, 35]; // Пример данных const canvas = document.getElementById('lineChart'); const ctx = canvas.getContext('2d'); // Устанавливаем размеры канваса canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; const maxDataPoint = Math.max(...dataPoints); const chartHeight = canvas.height - 40; // Увеличиваем отступ сверху и снизу const chartWidth = canvas.width - 40; // Увеличиваем отступ слева и справа const stepX = chartWidth / (dataPoints.length - 1); const stepY = chartHeight / maxDataPoint; // Рисуем серые линии сетки ctx.strokeStyle = '#e0e0e0'; ctx.lineWidth = 1; for (let i = 0; i <= maxDataPoint; i += 5) { const y = chartHeight + 30 - (i * stepY); // 30 — отступ сверху ctx.beginPath(); ctx.moveTo(10, y); ctx.lineTo(chartWidth + 10, y); ctx.stroke(); ctx.fillStyle = '#333'; ctx.fillText(i, 5, y + 5); // Подписи по оси Y } // Рисуем оси ctx.beginPath(); ctx.moveTo(10, 30); ctx.lineTo(10, chartHeight + 30); ctx.lineTo(chartWidth + 10, chartHeight + 30); ctx.strokeStyle = '#ccc'; ctx.stroke(); // Рисуем линию диаграммы ctx.beginPath(); dataPoints.forEach((point, index) => { const x = index * stepX + 10; const y = chartHeight + 30 - (point * stepY); ctx.lineTo(x, y); }); ctx.strokeStyle = '#007AFF'; // Цвет линии ctx.lineWidth = 2; ctx.stroke(); // Рисуем точки на линии ctx.fillStyle = '#007AFF'; dataPoints.forEach((point, index) => { const x = index * stepX + 10; const y = chartHeight + 30 - (point * stepY); ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); }); // Подписываем ось X ctx.fillStyle = '#333'; dataPoints.forEach((point, index) => { const x = index * stepX + 10; ctx.fillText(index + 1, x - 5, chartHeight + 25); // Подписи по оси X }); </script> </body> </html>

Создание линейной диаграммы с использованием HTML5 Canvas на примере конструктора Puzzle

Структура кода

1. HTML-структура

2. Стилизация

3. Обработка данных и рисование графика

4. Установка размеров и расчеты

5. Рисование сетки и осей

6. Рисование линии диаграммы и точек

Итог и сам код