Highcharts - 无法在格式化程序中创建的标签上调用 onclick 函数

Question

我创建了 Highchart 并在其上添加了自定义 xAxis 标签。自定义标签是超链接的，需要处理 onclick 事件。请检查以下 Highchart 创建代码。

格式化程序代码 ->

labels: {  
      enabled: true,        
      formatter: function() {
        var txn = JSON.parse(this.value);            
        if (!txn || !txn.txnType) {
          return this.value;
        }
        var mvmtLink = '<a classname="x_axis_mvmt_no" >' + txn.no + '</a>';
        return mvmtLink;
      },
      useHTML: true,
    },

整个代码 ->

Highcharts.AST.allowedAttributes.push('onclick', 'classname');
this.assetsByDelay = {
  title: {
    text: null,
  },
  credits: {
    enabled: false,
  },
  chart: {
    styledMode: true,
    className: 'assets-by-delay-chart',
    marginRight: 100,
    labels: {
      useHTML: true,
    },
  },

  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false,
        },
      },
      zones: [{
        className: 'default',
      }],
    },
    bar: {
      pointWidth: 2,
    },
    scatter: {
      dataLabels: {
        enabled: true,
        crop: false,
        x: 40,
        y: 10,
        overflow: 'none',
        formatter: function() {
          return this.point.options.visibleValue - shift;
        },
      },

    },
  },
  tooltip: {
    enabled: false,
  },

  xAxis: {
    type: 'category',
    title: {
      text: Labels.get('Meta.RTTEP.Movements'),
    },
    labels: {  
      enabled: true,        
      formatter: function() {
        var txn = JSON.parse(this.value);            
        if (!txn || !txn.txnType) {
          return this.value;
        }
        var mvmtLink = '<a classname="x_axis_mvmt_no" >' + txn.no + '</a>';
        return mvmtLink;
      },
      useHTML: true,
    },
    min: 0,
    max: 9,
    gridLineWidth: 1,
    tickmarkPlacement: 'on',
    scrollbar: {
      enabled: true,
    },
    tickLength: 0,
  },

  yAxis: {
    title: {
      text: Labels.get('meta.label.RTTEP.RemainingDays'),
      align: 'high',
    },
    tickInterval: 10,
    gridLineColor: 'transparent',
    allowDecimals: false,
    labels: {
      //step: 1,
      enabled: true,
      useHTML: true,
    },
    plotLines: [{
      className: 'zero-percent-line',
      value: shift,
    }],
  },
  labels: {
    useHTML: true,
  },          
  series: [{
    type: 'bar',
    colorByPoint: true,
    data: [],
    showInLegend: false,
    useHTML: true,
  },
  {
    type: 'scatter',
    colorByPoint: true,
    data: [],
    showInLegend: false,
    keys: ['movement', 'y', 'type', 'visibleValue'],
    marker: {
      symbol: 'this property required to be set',
      fontAwesomeConfig: {
        symbol: 'text:\uf0d1',
        customizeFn: function(svgElem, x, y, w, h, options) {
          return svgElem.attr({
            translateY: h - 23,
            translateX: 0,
            rotate: 90,
          })
            .css({
              fontFamily: '"Font Awesome 5 Free"',
              fontSize: '14px',
              'font-weight': 900,
            });
        },
      },
    },
  }],

};

如图所示，我为 xAxis 标签添加了格式化程序并将文本显示为超链接，但无法在其上实现 onclick 事件。我尝试了以下解决方案，但它们没有用 -

1. 在锚标签中添加了 onclick 事件。

2. 在 x 轴的标签上添加了点击事件，但它不适用于点击自定义标签，它在点击图表的轴后起作用。因此无法实现目标。

3. 在图表上添加了加载事件，因此可以访问轴标签，但它不起作用。

4. 使用了下面的解决方案，但每次最后都会调用格式化程序，所以这个解决方案也不起作用。 在 highcharts 工具提示中不触发点击事件

有人可以帮忙提供在 Highcharts 的自定义轴标签上注册和调用 onclick 事件的解决方案吗？

 if (document.getElementsByClassName('.x_axis_mvmt_no').length > 0) {
            document.getElementsByClassName('.x_axis_mvmt_no').click(function () {
              console.log(this);
            });
          }