Chart.js：实现从下往上生长的反向柱状图（适配成绩评分逻辑）

我懂你的痛点——直接用reverse选项好像只是把Y轴倒过来，但柱子的高度还是跟着原始数据走，1分的柱子反而最矮，完全不是想要的效果！别着急，咱们通过数据转换+自定义Y轴刻度就能完美实现你要的：1分对应高柱、6分对应矮柱，而且柱子从底部向上生长。

下面是完整的可运行代码，我给你拆解清楚每一步：

var canvas = document.getElementById('myChart');
// 这里替换成你的真实成绩数据
var originalScores = [1, 3, 5, 2, 6, 4, 1];
// 关键一步：转换数据，让1分变成最大数值，6分变成最小数值
var transformedData = originalScores.map(score => 7 - score);

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: '学生成绩',
    data: transformedData,
    backgroundColor: 'rgba(54, 162, 235, 0.6)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};

var options = {
  scales: {
    y: {
      // 固定Y轴范围，对应转换后的数值（1-6）
      min: 1,
      max: 6,
      // 反转Y轴，让转换后的大数值（对应原始1分）在顶部
      reverse: true,
      // 自定义刻度显示，把转换后的数值转回原始分数
      ticks: {
        callback: function(value) {
          return 7 - value;
        }
      },
      // 给Y轴加个清晰的标题
      title: {
        display: true,
        text: '成绩（1=最优，6=最差）'
      }
    },
    x: {
      title: {
        display: true,
        text: '月份'
      }
    }
  }
};

var myChart = new Chart(canvas, {
  type: 'bar',
  data: data,
  options: options
});

核心逻辑解释： #

• 数据转换：用7 - score把原始成绩反转——1分变成6，6分变成1。这样Chart.js绘制时，数值越大柱子越高，刚好对应我们要的“1分最高、6分最矮”的视觉效果。
• Y轴自定义：
  • reverse: true让Y轴的刻度从大到小排列，但通过ticks.callback把刻度文字转回原始分数，用户看到的就是Y轴顶部是1（最优），底部是6（最差）。
  • 固定min和max确保Y轴范围精准，柱子会从底部（对应6分的位置）向上生长，完全符合你的需求。

如果你的分数范围不是固定1-6（比如0-10），只需要把转换公式改成最高分数 + 1 - 当前分数，对应的刻度回调也用同样的公式就行，非常灵活！

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