Розділ 2 — Розробка веб-додатку

HTML та структура сторінки

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

<div class="grid">
  <aside class="card">...панель керування...</aside>
  <section><canvas id="plotCanvas"></canvas></section>
</div>

CSS та оформлення

Використані стилі забезпечують адаптивність, приємну кольорову гаму, тіні для карток та зручне розташування елементів управління.

body { background: var(--bg); font-family: Arial; }
.card { padding: 20px; border-radius: 12px; box-shadow: 0 8px 22px rgba(12,24,50,0.06); }

JavaScript та динаміка графіків

Графіки побудовані за допомогою Chart.js. Користувач може обирати тип функції, вводити коефіцієнти, змінювати діапазон та тип графіка. Math.js використовується для безпечного обчислення формул.

const chart = new Chart(ctx, {
  type: 'line',
  data: { labels: [], datasets: [{data: []}] },
  options: { scales: { x: { type: 'linear' } } }
});

Масштабування та панорамування

Додано можливість масштабування та панорамування графіка шляхом зміни діапазону X/Y у панелі керування або використання інтерактивних елементів Chart.js.

// Оновлення графіка після зміни діапазону
function updatePlot() {
  chart.data.datasets[0].data = points;
  chart.options.scales.x.min = xMin;
  chart.options.scales.x.max = xMax;
  chart.update();
}