如何在Chart.js中统计重复数值并生成对应长度的柱状图

步骤1：统计1-5数值的出现次数 #

首先把提取到的字符串数值转成数字，再统计每个数值的出现次数：

// 将提取到的字符串数值转为数字数组
const numericYNav = yNav.map(val => parseInt(val, 10));

// 初始化统计数组，对应1-5的出现次数，初始值都为0
const counts = [0, 0, 0, 0, 0];

// 遍历数组统计次数
numericYNav.forEach(num => {
  // 只统计1-5范围内的数值
  if (num >= 1 && num <= 5) {
    counts[num - 1]++; // 数值1对应索引0，数值2对应索引1，以此类推
  }
});

步骤2：修改Chart.js配置 #

把图表标签固定为1-5，数据替换为统计好的次数数组：

new Chart("chartnavigation", {
    type: "bar",
    data: {
      labels: ['1', '2', '3', '4', '5'], // 固定显示1-5的数值标签
      datasets: [{
        backgroundColor: barColors,
        barPercentage: 0.5,
        data: counts // 使用统计后的次数数组
      }]
    },
    options: {
      legend: {display: false},
      title: {
        display: true,
        text: "数值出现次数统计"
      },
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '出现次数' // 给Y轴加标题，更直观
          }
        },
        x: {
          title: {
            display: true,
            text: '数值' // 给X轴加标题
          }
        }
      }
    }
  });

优化提取数值的代码 #

原代码中inputValNav未声明，建议添加变量声明，同时用trim()避免空格导致的无效值：

for (let i = 0; i < inputNav.length; i++) {
    if(inputNav[i].innerHTML.trim() !== '') {
        const inputValNav = inputNav[i].innerHTML;
        yNav.push(inputValNav);
   }
}

调整后，图表会显示1-5每个数值的出现次数，出现次数多的柱子对应更长的高度。

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