Chart.js横向条形图值为2或相同时部分条形消失问题求助

结论 #

这是Chart.js 2.9.4版本的已知渲染bug，并非你的代码错误。

问题原因 #

在Chart.js 2.9.x系列的横向条形图（配置indexAxis: 'y'的条形图）中，当数据值为特定数值（比如你遇到的2）时，内部坐标计算逻辑会出现精度误差，导致Chromium内核浏览器（Chrome、Edge等）渲染时条形被压缩或完全不显示。

解决办法 #

你可以通过以下方式解决：

• 升级Chart.js版本（推荐）：直接升级到3.x及以上稳定版本，新版本修复了大量旧版本的渲染bug，同时优化了整体性能。注意3.x版本存在API变更，需调整部分配置（例如options.scales.yAxes要改为options.scales.y）。
• 不升级版本的临时绕过方案：
  • 给触发问题的数值添加极小偏移，比如把值为2的数据改成2.0001，避开计算误差的临界值；
  • 调整y轴刻度内边距：在options.scales.yAxes[0].ticks中添加padding: 1，修正渲染时的坐标偏移；
  • 手动指定条形厚度：在options.scales.yAxes[0].barThickness中设置固定值（如10），强制条形的显示尺寸。

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