Для вывода графика функции JavaScript при нажатии на кнопку, вам понадобятся следующие шаги:
1. Создайте HTML-разметку с кнопкой и элементом, в котором будет отображаться график:
<button onclick="drawChart()">Показать график</button> <canvas id="chartCanvas"></canvas>
2. Создайте функцию, которая будет вызываться при нажатии на кнопку и рисовать график в элементе canvas:
function drawChart() { // Получить ссылку на элемент canvas const canvas = document.getElementById('chartCanvas'); const context = canvas.getContext('2d'); // Очистить предыдущий график context.clearRect(0, 0, canvas.width, canvas.height); // Определить размеры графика const width = canvas.width; const height = canvas.height; // Нарисовать оси координат context.beginPath(); context.moveTo(0, height / 2); context.lineTo(width, height / 2); context.moveTo(width / 2, 0); context.lineTo(width / 2, height); context.stroke(); // Определить функцию, для которой нужно построить график const func = (x) => Math.sin(x); // Пример функции: синус // Нарисовать график context.beginPath(); context.moveTo(0, height / 2 - func(-width / 2)); for (let x = -width / 2; x <= width / 2; x += 0.1) { const y = func(x); context.lineTo(x + width / 2, height / 2 - y); } context.stroke(); }
3. При необходимости, стилизуйте элемент canvas, чтобы график выглядел более привлекательно:
#chartCanvas { width: 400px; height: 400px; border: 1px solid black; }
4. Готово! Теперь, при нажатии на кнопку "Показать график", функция drawChart()
будет вызываться, и график функции будет отображаться на элементе canvas с id "chartCanvas".
Это базовый пример, который позволяет отобразить график заданной функции при нажатии на кнопку в JavaScript. Вы можете экспериментировать с кодом, изменяя функцию и стилизацию, чтобы адаптировать его под свои потребности.