为 Highchart 地图中的标签添加边框

Question

目前我的 Highcharts 热图如下所示：

有没有办法在 y 轴标签下方添加边框，使其看起来像这样？

首先我想到尝试使用 formatter() 函数并为具有 border Bottom 的标签提供样式。但在使用格式化程序时，标签与热图不保持一致，并且显示在上面一点。使用边距或偏移量不会有帮助，因为我们有用于不同目的的动态数量的 y 轴标签。

这是我正在尝试的代码：

yAxis: {
    min: 0,
    max: caregap_nm.length - 1,
    categories: ['APPLES', 'ORANGES', 'PEARS', 'GUAVA', 'GRAPES', 'MELONS'],
    reversed: true,
    title: {
      align: 'high',
      offset: 0,
      text: '',
      rotation: 0,
      y: -20,
      x: -25,
      style: {
        fontSize: '16px',
        fontWeight: 600,
      },
    },
    labels: {
      useHTML: true,
      align: 'left',
      x: -100,
      style: {
        fontSize: '14px',
        fontWeight: 400,
      },
      formatter() {
        return `<div class="cg-y-labels"><span>${this.value}</span></div>`;
      },
    },
  },

Answer 1

您可以使用 yAxis 刻度，并仅显示标签下的刻度，您可以使用

chart.events.renderer()

回调函数删除第一个刻度：

chart: {
  events: {
    render: function() {
      this.yAxis[0].ticks[-1].destroy();
    }
  }
},
yAxis: {
  tickWidth: 1,
  tickLength: 100
},

演示：https://jsfiddle.net/BlackLabel/5fdan8rL/
API：https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/highcharts/yAxis.tickWidth
https://api.highcharts.com/highcharts/yAxis.tickLength