Highcharts图表图例底部边框被截断问题求助

云上老周

2026-6-19

解决Highcharts图例底部边框被截断的问题

问题根源是adapt-chart-to-legend插件在计算图表高度时，未将图例的边框宽度纳入考量，导致图例容器被裁切，且不受图例元素数量影响。以下是几个保留插件功能的解决办法：

手动补偿图例边距
在图例配置中添加margin，预留出底部边框的显示空间：

legend: {
  borderWidth: 1,
  margin: 8, // 可根据边框宽度调整数值，确保底部边框完整显示
  // 其他原有配置项
}

修正插件的高度计算逻辑
找到插件内计算图例高度的代码块，在原有高度基础上加上两倍边框宽度（覆盖上下边框）：
```
// 插件内的高度计算部分修改为
var legendTotalHeight = legend.legendHeight + legend.options.borderWidth * 2;
```
让插件调整图表高度时包含边框空间，避免截断。
图表加载后动态调整图例位置
在图表的加载事件中，手动给图例底部增加与边框宽度相等的偏移量：
```
chart: {
  events: {
    load: function() {
      const legend = this.legend;
      legend.bottom += legend.options.borderWidth;
      legend.render();
    }
  }
}
```
该方法无需修改插件，直接在图表配置中添加代码即可生效，同时保留插件调整图表高度的功能，保证Y轴分辨率足够。