Chart.js - 包含输入值的堆积条形图

Question

我正在尝试使用 chart.js 绘制图表。只有两个值的垂直堆叠条形图。

当我将数字硬编码为数据时，图表按预期工作。但是，我想动态获取带有类型数字字段的两个不同输入的值，并让它们在输入字段的值更新时更新图表。

当我尝试这样做时，图表无法正常工作。这是我创建的小提琴的链接。 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>

任何帮助将不胜感激。

Answer 1

输入字段应分别分配给每个数据集。

function updateChart2() {
  chart2.data.datasets[0].data = [data1a.value];
  chart2.data.datasets[1].data = [data2a.value];
  chart2.update();
}

Demo @ StackBlitz