如何让Chart.js柱状图数量与用户输入数值匹配？

需求说明 #

开发柱状图时，需要实现在id="num-input"的输入框中输入数值（例如输入12）时，渲染出的柱状图总数量与输入值相等，即labels变量长度与用户输入值保持一致。

现有代码问题 #

• 错误将输入框返回的字符串直接赋值给labels：比如输入12时，labels实际是字符串"12"，长度为2，会被Chart.js解析为2个标签分别是"1"和"2"，和预期完全不符
• datasets[0].data是写死的固定长度数组，长度只有7，不会随输入值动态调整，柱数量无法匹配输入值
• 每次触发更新函数都新建Chart实例，没有销毁旧实例，多次触发会导致画布图层重叠、渲染错乱

修复步骤 #

• 对输入值做合法性校验，过滤非正整数的无效输入，避免解析错误
• 遍历输入的数值长度，生成对应长度的labels数组，标签文本可根据业务需求自定义
• 同步生成和labels等长的柱值数组，保证每个柱子对应一个展示数值
• 全局缓存Chart实例，每次更新前先销毁已存在的旧实例，防止画布渲染异常
• 给输入框绑定触发事件，输入变化时自动调用更新函数重绘图表

修复后完整代码 #

// 全局缓存图表实例，避免重复初始化导致渲染异常
let myChart = null;

function updateChart() {
  // 获取输入值并做合法性校验
  const inputVal = $("#num-input").val().trim();
  const barCount = parseInt(inputVal);
  if (isNaN(barCount) || barCount <= 0) {
    console.warn('请输入有效的正整数');
    return;
  }

  // 生成和输入值长度一致的labels数组
  const labels = [];
  // 同步生成对应长度的柱数据，可替换为实际业务数据
  const barData = [];
  for (let i = 0; i < barCount; i++) {
    labels.push(`第${i+1}项`); // 标签文本可按需修改
    // 示例用随机数生成柱值，替换为实际业务数据即可
    barData.push(Math.floor(Math.random() * 50) + 1);
  }

  const chartData = {
    labels: labels,
    datasets: [{
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: barData,
    }]
  };

  const config = {
    type: 'bar',
    data: chartData,
    options: {}
  };

  // 存在旧实例时先销毁，再渲染新图表
  if (myChart) {
    myChart.destroy();
  }
  myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
}

// 绑定输入框触发事件，输入变化时自动更新图表
$("#num-input").on('input change', updateChart);

效果说明 #

输入任意正整数时，会自动生成对应数量的标签和柱状条，柱数量与输入值完全匹配。

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