Chart.js横向条形图max/min值设置不生效问题求助

你的问题出在轴的配置对象选错了：

当设置indexAxis: 'y'启用横向条形图时，y轴是分类轴（对应你的labels），而承载加班/欠班时长数值的是x轴。你之前把min/max设置到yAxes里，分类轴不需要也不会生效这些数值范围配置，所以Chart.js自动根据你的数据范围（-10到50）渲染了x轴。

修正步骤 #

1. 将数值范围配置从yAxes移到xAxes中
2. 清理多余的suggestedMin/suggestedMax（如果已经设置min/max，这两个参数冗余，因为min/max是强制生效的）
3. 调整数据格式（你当前的[[-10,50]]会在同一个标签下生成两个条形，若要分别展示欠班和加班，建议拆成两个数据集；若仅展示单条状态，直接用单个数值即可）

修正后的完整代码 #

const ctx = document.getElementById('myChart');

const data = {
  datasets: [{
    label: '加班时长',
    data: [50],
    backgroundColor: '#2ecc71'
  }, {
    label: '欠班时长',
    data: [-10],
    backgroundColor: '#e74c3c'
  }],
  labels: ["时长统计"]
};

const options = {
    indexAxis: 'y',
    responsive: true,
    scales: {
      xAxes: [{
        display: true,
        min: -100,
        max: 100,
        beginAtZero: false,
        ticks: {
          stepSize: 20,
          callback: value => `${value}h`
        }
      }],
      yAxes: [{
        display: true
      }]
    }
};

new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options,
});

额外说明 #

• 横向条形图的数值轴是x轴，分类轴是y轴，所有数值相关配置（范围、刻度、单位等）都要放在xAxes里
• 如果只需要展示一个综合数值（比如当前总时长为40），可以合并数据集，data: [40]即可

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