如何在Chart.js中实现刻度均匀分布的水平柱状图

我太懂你折腾这个刻度配置的头疼了！其实要实现0到70、增量10的均匀刻度，核心就是在Chart.js的轴配置里明确锁定范围和步长，而且得注意水平柱状图的数值轴是X轴（和垂直柱状图的轴对应关系反过来了）。

下面给你修正后的完整代码，我把关键配置都补全了：

<div style="width: 330px; height: 100px;">
  <canvas id="chartBarChart1" style="margin-right: auto; margin-left: auto; display: block;" height="100"></canvas>
</div>

<script>
// 推荐用Chart.js v3+版本（新版语法更规范）
const ctx = document.getElementById('chartBarChart1').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar', // 新版用通用bar类型
  indexAxis: 'y', // 这一行开启水平柱状图模式
  data: {
    labels: ['你的数据标签'], // 替换成你实际的标签文本
    datasets: [{
      label: '统计数据',
      data: [45], // 替换成你的实际数据值
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      x: { // 水平柱状图的数值轴是X轴，在这里配置刻度
        min: 0, // 刻度最小值锁定为0
        max: 70, // 刻度最大值锁定为70
        ticks: {
          stepSize: 10, // 刻度之间的增量设为10
          autoSkip: false // 强制显示所有刻度，避免Chart.js自动跳过
        }
      }
    }
  }
});
</script>

如果你的项目还在使用旧版Chart.js（v2），代码要调整成下面的写法：

<div style="width: 330px; height: 100px;">
  <canvas id="chartBarChart1" style="margin-right: auto; margin-left: auto; display: block;" height="100"></canvas>
</div>

<script>
// Chart.js v2版本的写法
const ctx = document.getElementById('chartBarChart1').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'horizontalBar', // v2里直接用这个类型实现水平柱状图
  data: {
    labels: ['你的数据标签'],
    datasets: [{
      label: '统计数据',
      data: [45],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{ // v2里轴配置是数组形式
        ticks: {
          min: 0,
          max: 70,
          stepSize: 10,
          autoSkip: false
        }
      }]
    }
  }
});
</script>

最后再划几个重点：

• 新版Chart.js已经废弃了horizontalBar类型，改用bar+indexAxis: 'y'的方式，建议升级到新版避免兼容性问题
• 必须设置min和max锁定刻度范围，不然Chart.js会根据你的数据自动调整轴范围，导致刻度不符合预期
• autoSkip: false很重要，它能强制显示所有刻度，不会因为空间问题被Chart.js自动隐藏

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