Chart.js垂直柱状图X轴标签镜像实现及文本对齐修复求助

嘿，我懂你想要实现类似镜像效果的X轴标签，但目前插件里硬编码的padding值导致缩放时对齐乱掉的烦恼！咱们来修改插件逻辑，让文本对齐能动态适配图表尺寸：

修改后的插件代码 #

Chart.plugins.register({
  id: "responsiveXlabels",
  beforeDraw: function(c) {
    var chartHeight = c.chart.height;
    var size = (chartHeight * 2.5) / 100;
    var xAxis = c.scales["x-axis-0"];
    
    // 按图表比例设置字体大小
    xAxis.options.ticks.fontSize = size;
    // 给标签预留足够显示空间
    xAxis.height = size * 2;
    xAxis.minSize.height = size * 2;
    
    // 动态计算padding：让标签精准定位到图表底部区域
    // 系数1.5可以根据你想要的文本间距微调
    var labelOffset = -(chartHeight - xAxis.bottom - size * 1.5);
    c.options.scales.xAxes[0].ticks.padding = labelOffset;
    xAxis.margins.bottom = size * 3;
  },
  afterDraw: function(c) {
    // 删掉硬编码的padding赋值，不然会覆盖动态计算的结果
    // c.options.scales.xAxes[0].ticks.padding = -158;
  }
});

核心优化点： #

• 去掉固定偏移值：原来的-158是死数值，图表一缩放就会错位，现在改成根据图表高度和X轴位置动态计算偏移量，确保标签始终在正确位置。
• 动态适配空间：根据字体大小调整轴的高度和底部边距，避免标签被截断或者和图表内容重叠。
• 可选：优化文本对齐方式：如果想要文本更规整，可以在X轴配置里加上ticks.align: 'center'，让标签居中对齐X轴刻度。

这样调整后，你的镜像X轴标签在图表缩放时就能保持正确的对齐效果啦！

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