如何在两个Y值都是用户输入的HTML中创建多Y轴图表？

<form>
  <label for="y1">Y1:</label>
  <input type="number" id="y1" name="y1"><br><br>
  <label for="y2">Y2:</label>
  <input type="number" id="y2" name="y2"><br><br>
  <input type="button" value="生成图表" onclick="generateChart()">
</form>

function generateChart() {
  var y1 = parseFloat(document.getElementById("y1").value);
  var y2 = parseFloat(document.getElementById("y2").value);

  var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Label 1', 'Label 2', 'Label 3'], // 根据实际需求设置X轴标签
      datasets: [{
        label: 'Y1',
        yAxisID: 'y-axis-1',
        data: [y1, y1, y1], // 根据实际需求设置Y1轴数据
        borderColor: 'red',
        backgroundColor: 'rgba(255, 0, 0, 0.2)',
      }, {
        label: 'Y2',
        yAxisID: 'y-axis-2',
        data: [y2, y2, y2], // 根据实际需求设置Y2轴数据
        borderColor: 'blue',
        backgroundColor: 'rgba(0, 0, 255, 0.2)',
      }]
    },
    options: {
      scales: {
        yAxes: [{
          id: 'y-axis-1',
          type: 'linear',
          position: 'left',
        }, {
          id: 'y-axis-2',
          type: 'linear',
          position: 'right',
        }]
      }
    }
  });
}

<canvas id="chart"></canvas>