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()函数。

在这里拨弄：https://jsfiddle.net/kd4Lnwtj/5/

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Pay-as-you-go中任何type的默认<button>属性是“提交”。

尝试将<form>添加到显示按钮。那应该阻止它提交，只让您的JavaScript运行。

类似的东西：

type="button"

按下“提交”按钮后，图表消失了

2 个答案: