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