如何修改Chart.js水平条形图左侧轴标签为100而非-100

实现方案 #

要实现左侧轴（x轴负方向）显示100而非-100，核心是保留数据的正负值以维持条形位置，仅修改刻度标签的显示内容，具体通过x轴的ticks.callback回调函数实现：

完整配置示例 #

const chart = new Chart(document.getElementById('your-chart-id'), {
  type: 'bar',
  data: {
    labels: ['类别1', '类别2', '类别3'], // 替换为你的y轴类别
    datasets: [
      {
        label: '右侧系列',
        data: [60, 80, 100], // 0-100的正数，条形向右延伸
        backgroundColor: 'rgba(54, 162, 235, 0.6)'
      },
      {
        label: '左侧系列',
        data: [-40, -70, -100], // 0--100的负数，条形向左延伸
        backgroundColor: 'rgba(255, 99, 132, 0.6)'
      }
    ]
  },
  options: {
    indexAxis: 'y', // 启用水平条形图
    scales: {
      x: {
        min: -100,
        max: 100,
        ticks: {
          // 回调转换刻度标签：将负数转为正数显示
          callback: function(value) {
            return Math.abs(value);
          }
        },
        // 可选：强化中心0刻度线，提升视觉区分度
        grid: {
          color: ctx => ctx.tick.value === 0 ? '#333' : '#eee'
        }
      }
    }
  }
});

关键要点 #

• 数据逻辑不变：左侧条形仍使用负数值，确保条形向0点左侧延伸；仅通过回调修改刻度的显示文本。
• 轴范围锁定：设置x.min=-100和x.max=100，保证轴的两端刚好覆盖到100的位置。
• 可选优化：通过网格线颜色区分中心0线，让两侧的条形分界更清晰。

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