You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chart.js中禁用自动适配:固定Y轴范围0-100

解决Chart.js横向柱状图固定数值轴范围的问题

你犯了一个关键的配置错误:当设置indexAxis: 'y'实现横向柱状图时,y轴是类别轴(用来显示标签),而承载数值的轴是x轴。你之前把min/max配置到y轴上,自然不会生效。

正确的做法是把数值范围的配置放到x轴的scales设置里:

options: {
  indexAxis: 'y',
  scales: {
    x: {
      min: 0,
      max: 100,
      // 不需要beginAtZero,因为已经显式设置了min:0
    },
    y: {
      beginAtZero: true // 这个是针对类别轴的起始设置,不影响数值范围
    }
  }
}

补充说明:

  • 横向柱状图的逻辑是把原x轴的数值映射到横向的x轴,y轴用来展示每个柱子的类别标签,所以数值范围的控制必须针对x轴。
  • 不需要设置suggestedMin/suggestedMax,因为这两个参数只是给图表提供参考范围,不会强制锁定;而min/max是强制固定轴的边界,优先级更高。
  • 不存在autoFit这个配置项,属于无效设置。

内容的提问来源于stack exchange,提问作者AlexK

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 23:12:34