HighCharts柱状图y轴设100上限却显示120%的问题

问题分析 #

你遇到的y轴设置floor:0、ceiling:100但顶部显示120%刻度的问题，本质是HighCharts默认的刻度生成逻辑导致的：当endOnTick为默认true时，图表会尝试让刻度线对齐到自动计算的间隔值，若100刚好是某个间隔的终点，下一个间隔值（比如20的间隔就是120）会被当作刻度，哪怕超过了ceiling。而调低ceiling到90以下时，90刚好卡在自动间隔内，所以不会触发这个问题。

解决方案 #

直接修改y轴配置，通过以下几种方式强制约束刻度范围：

1. 手动指定刻度位置
   直接定义所有要显示的刻度值，彻底避免自动计算的偏差：

   yAxis: {
       floor: 0,
       ceiling: 100,
       tickPositions: [0, 20, 40, 60, 80, 100], // 自定义刻度数组
       title: { text: 'Headshot%' }
   }
   

2. 关闭刻度强制对齐
   将endOnTick设为false，不让图表为了对齐刻度而超出ceiling：

   yAxis: {
       floor: 0,
       ceiling: 100,
       endOnTick: false,
       maxPadding: 0, // 配合取消顶部内边距，避免额外空间
       title: { text: 'Headshot%' }
   }
   

3. 固定刻度间隔
   手动设置tickInterval为固定值，确保自动生成的刻度不会超过100：

   yAxis: {
       floor: 0,
       ceiling: 100,
       tickInterval: 20,
       maxPadding: 0,
       title: { text: 'Headshot%' }
   }
   

以上三种方式任选其一即可解决问题，其中手动指定tickPositions是最稳妥的方案，完全可控。

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