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

我是一个刚刚开始学习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=document.getElementById（'StartFreq'）；
让StopFreq=document.getElementById（'StopFreq'）；
设XTick=document.getElementById（'XTick'）；
设ctx=document.getElementById（'myChart'）.getContext（'2d'）；
函数generateLabels（）{
设xvals=[]；
for（设i=0；i<14；i++）{
xvals.push（parseFloat（StartFreq.value）+parseFloat（XTick.value）*i）
}
返回xVAL
}
让图表=新图表（ctx{
//我们要创建的图表类型
键入：“行”，
//我们的数据集的数据
数据：{
标签：generateLabels（），
数据集：[{
标签：“R-TE10”，
数据：[0,10,5,2,20,30,45]
}]
},
//配置选项在这里
选项：{
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
分:0,，
最多：10
}
}]
}
}
});
函数generateChart（）{
生成标号（）；
图表更新（）
}

---

为了澄清，我希望StartFreq位于图表最左下角的刻度，而最右下角的刻度是停止频率。我希望每个刻度均匀分布，每个刻度都值Xtick输入值。我想在单击“生成图表”按钮时更新图表。

您的错误如下

要更新选项，请就地修改“选项”属性，或 支持传入新的选项对象

从

为了使更新生效，您需要对原始对象进行变异，而您没有这样做

只要这样做就能解决它

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

或者更好的方法是，仅在单击“生成”时创建/显示图表