javascript - 按下提交按钮时图表消失

Question

几天前我开始学习 Chart.js 库，在尝试创建图表时遇到问题，这取决于用户输入。

我有 4 个输入框和一个按钮，当我按下按钮时它会显示图形，但只有几秒钟。

这是我为图表编写的代码:

<canvas id="myChart"></canvas>
<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart;

  function display(a, b, c, d) {
    myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["a", "b", "c", "d"],
        datasets: [{
          label: 'data',
          data: [a.value, b.value, c.value, d.value],
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)',
            'rgba(54, 162, 235, 0.5)',
            'rgba(255, 206, 86, 0.5)',
            'rgba(75, 192, 192, 0.5)',
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
          ],

        }]
      },
      options: {}
    });
  }
</script>

这是输入代码:

<form>
  a: <input type="number" id="a"><br>
  b: <input type="number" id="b"><br>
  c: <input type="number" id="c"><br>
  d: <input type="number" id="d"><br>
  <button onclick="display(a,b,c,d)">display</button>
</form>

Answer 1

您已经非常接近了，您需要做的就是添加一个 event.preventDefault() 以防止页面实际提交表单。您真正想要做的就是调用 display() 函数。

在这里 fiddle :https://jsfiddle.net/kd4Lnwtj/5/