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
相关产品推荐
相关产品推荐

