Chart.js-根据用户输入设置x轴

Question

我是一个初学者，只是在学习chart.js。有人可以帮助我理解为什么按下“生成图表”按钮后，我的x轴标签不能适应用户的输入吗？我觉得我所有的代码都是正确的。这是下面的代码。

        <td><input type="number" id="StartFreq"/></td>
          <td><input type="number" id="StopFreq"/></td>
          <td><input type="number" id="XTick"/></td>

        </tr>
      </table>
      <button onclick="generateChart()"><strong>Generate Chart</strong></button>
    </section>

    <br>
    <br>
    <section>
      <canvas id="myChart"></canvas>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
      <script>
      let StartFreq = document.getElementById('StartFreq');
      let StopFreq = document.getElementById('StopFreq');
      let XTick = document.getElementById('XTick');
      let ctx = document.getElementById('myChart').getContext('2d');

      function generateLabels(){
        let xvals = [];
        for (let i = 0; i < 14; i++) {
          xvals.push(parseFloat(StartFreq.value) + parseFloat(XTick.value) * i )
        }
        return xvals

      }

      let chart = new Chart(ctx, {

      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
      labels: generateLabels(),
      datasets: [{
      label: 'R-TE10',
      data: [0, 10, 5, 2, 20, 30, 45]
      }]
      },

      // Configuration options go here
      options: {
        scales : {
          xAxes:[{
            ticks: {
              beginAtZero: true
            }
          }],
          yAxes : [{
            ticks : {
              beginAtZero : true,
              min : 0,
              max: 10
            }
          }]
        }

      }
      });
      function generateChart() {
        generateLabels();
        chart.update()
      }
      </script>
    </section>

为了澄清起见，我希望StartFreq位于图表最底部的刻度线，而我最右下方的刻度线是Stop Freq。我希望每个刻度线均匀分散，每个刻度线都值得Xtick输入值。单击生成图表按钮时，我希望图表更新。

Answer 1

您的错误是以下

要更新选项，请在适当位置更改options属性或支持传入新的选项对象。

来自Chart.js

为了使更新生效，您需要对未使用的原始对象进行突变。

仅通过执行此操作即可解决

function generateChart() {
  generateLabels();
  chart.data.labels = generateLabels();
  chart.update();
}

Demo

或者更好的是，仅在单击生成时才创建/显示图表。