Chart.js动态获取输入值实现堆叠柱状图问题求助

你的代码存在几个关键问题导致堆叠柱状图无法正常动态更新，以下是具体修复要点和完整代码：

核心问题分析 #

• 初始化数据格式错误：Chart.js要求dataset.data必须是数组类型，你直接传入单个的输入框值（初始为空字符串），导致图表初始化异常。
• 更新逻辑错误：updateChart2函数错误地将两个输入值都赋值给第一个数据集，完全忽略了第二个数据集的更新，堆叠柱状图需要分别维护两个数据集的数值。
• 数据类型不匹配：输入框的value是字符串类型，未转为数字会导致Chart.js无法正确渲染数值。
• 初始值缺失：输入框默认无值，导致图表初始化时没有基础数据。

修复后的完整代码 #

<form>
  <input type="number" id="calc1" value="0" onInput="updateChart2();" />
  <input type="number" id="calc2" value="0" onInput="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: [Number(data1a.value)],
          backgroundColor: 'rgba(0,255,255,1)',
          datalabels: {
            color: '#000000',
            anchor: 'end',
            align: 'start',
            clip: true,
            formatter: function (value) {
              return value + '  %';
            },
          },
        },
        {
          label: 'Ist / Soll',
          data: [Number(data2a.value)],
          backgroundColor: 'rgba(0,100,100,1)',
          datalabels: {
            color: '#000000',
            anchor: 'end',
            align: 'start',
            clip: true,
            formatter: function (value) {
              return value + '  %';
            },
          },
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: true,
          position: 'bottom',
        },
      },
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
          beginAtZero: true
        },
      },
    },
  });

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

关键修改点 #

• 给输入框添加value="0"默认值，确保图表初始化时有有效数据。
• 初始化和更新时，将输入值转为Number类型，避免字符串引发的渲染错误。
• 将dataset.data调整为数组格式，符合Chart.js的数据结构要求。
• 修改updateChart2函数逻辑，分别更新两个数据集的对应数值，保证堆叠关系正确。
• 将onChange替换为onInput，实现输入过程中实时更新图表（onChange仅在输入框失焦时触发）。
• 添加y.beginAtZero: true，让Y轴从0开始，更直观展示堆叠比例。

内容的提问来源于stack exchange，提问作者Zisis Paparidis