ChartJS垂直柱状图：按类别最大题数计算正确率百分比

嘿，很高兴看到你已经啃完ChartJS文档还做了不少示例！针对你要做的这个答题正确率可视化需求，我来给你一步步捋清楚实现思路和代码～

核心思路 #

首先明确需求：每个柱子对应一个数学分类，柱子高度代表答对率（答对题数/总题数），y轴以百分比展示，同时能直观看到具体的答对/总题数。这里最合理的做法是把答对数转换成百分比作为柱子数据，这样所有分类共用0-100%的y轴，不会因为总题数不同导致视觉误导。

步骤1：整理并处理数据 #

先把你的原始数据整理成结构化的数组，方便后续计算和调用：

// 替换成你实际的真实数据
const subjectData = [
  { label: '代数', correct: 7, total: 10 },
  { label: '微积分', correct: 4, total: 10 },
  { label: '分析', correct: 8, total: 10 },
  { label: '几何', correct: 6, total: 10 },
  { label: '组合数学', correct: 9, total: 10 }
];

// 计算每个分类的正确率百分比，生成ChartJS需要的数据集
const chartData = {
  labels: subjectData.map(item => item.label), // x轴标签：各个数学分类
  datasets: [{
    label: '答题正确率',
    data: subjectData.map(item => (item.correct / item.total) * 100), // 核心数据：百分比
    // 自定义柱子样式，你可以根据喜好调整颜色
    backgroundColor: [
      'rgba(255, 99, 132, 0.6)',
      'rgba(54, 162, 235, 0.6)',
      'rgba(255, 206, 86, 0.6)',
      'rgba(75, 192, 192, 0.6)',
      'rgba(153, 102, 255, 0.6)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)'
    ],
    borderWidth: 1
  }]
};

步骤2：配置图表选项（关键！） #

这里要重点配置y轴显示百分比，以及tooltip的详细提示：

const chartOptions = {
  scales: {
    y: {
      beginAtZero: true, // y轴从0开始
      max: 100, // 最大值设为100（对应100%）
      ticks: {
        // 把y轴刻度转换成百分比格式
        callback: function(value) {
          return `${value}%`;
        }
      },
      title: {
        display: true,
        text: '正确率' // y轴标题
      }
    },
    x: {
      title: {
        display: true,
        text: '数学分类' // x轴标题
      }
    }
  },
  plugins: {
    tooltip: {
      // 鼠标hover柱子时，显示更详细的信息
      callbacks: {
        label: function(context) {
          const item = subjectData[context.dataIndex];
          return `${item.correct}/${item.total} (${context.parsed.y.toFixed(1)}%)`;
        }
      }
    }
  }
};

步骤3：初始化图表 #

最后在HTML里加一个canvas容器，然后初始化ChartJS实例：

<!-- 页面上的canvas容器，注意要给它设置合适的宽高 -->
<canvas id="mathAccuracyChart" width="600" height="400"></canvas>

// 获取canvas上下文，初始化图表
const ctx = document.getElementById('mathAccuracyChart').getContext('2d');
new Chart(ctx, {
  type: 'bar', // 垂直柱状图类型
  data: chartData,
  options: chartOptions
});

额外说明 #

• 如果你的分类总题数不一样（比如有的是20题，有的是15题），上面的代码依然能正常工作，因为我们是基于百分比计算的，不会出现视觉偏差。
• 样式部分（颜色、宽高、字体等）都可以根据你的需求自由调整，ChartJS的配置项非常灵活。
• 要是你想给柱子添加动画、图例控制等功能，直接在chartOptions里加对应的配置就行～

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