我正在尝试用chart.js绘制一个图表。一个只有两个值的垂直堆叠条形图。
当我将数字硬编码为数据时，图表按预期工作。但是，我希望动态获取两个不同输入的值，类型为number字段，并在输入字段的值更新时更新图表。
当我尝试这样做时，图形不能正常工作。下面是我创建的小提琴的链接。https://jsfiddle.net/zissman/c9bnedy2/。以及相应的代码。

<form>
  <input type="number" id="calc1" onChange="updateChart2();" />
  <input type="number" id="calc2" onChange="updateChart2();" />
</form>

<canvas id="myChart"></canvas>

<script type="text/javascript">
  var data1a = document.getElementById('calc1');
  var data2a = document.getElementById('calc2');

  var ctx2 = document.getElementById('myChart').getContext('2d');
  var chart2 = new Chart(ctx2, {
    plugins: [ChartDataLabels],
    type: 'bar',
    data: {
      labels: [''],
      datasets: [
        {
          label: 'Vorjahr',
          data: data1a.value,
          backgroundColor: 'rgba(0,255,255,1)',
          datalabels: {
            color: '#000000',
            anchor: 'end',
            align: 'start',
            clip: true,
            formatter: function (value2, ctx2) {
              return value2 + '  %';
            },
          },
        },
        {
          label: 'Ist / Soll',
          data: data2a.value,
          backgroundColor: 'rgba(0,100,100,1)',
          datalabels: {
            color: '#000000',
            anchor: 'end',
            align: 'start',
            clip: true,
            formatter: function (value2, ctx2) {
              return value2 + '  %';
            },
          },
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: true,
          position: 'bottom',
        },
      },
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
        },
      },
    },
  });

  function updateChart2() {
    var updateValues2 = [data1a.value, data2a.value];
    chart2.data.datasets[0].data = updateValues2;
    chart2.update();
  }
</script>

任何帮助将非常感激。