Как вывести график функции JS при нажатии на кнопку?

Для вывода графика функции 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. Вы можете экспериментировать с кодом, изменяя функцию и стилизацию, чтобы адаптировать его под свои потребности.