顶点图表将点击事件添加到标签

Question

我有一个线形区域的顶点图。
看起来像这样：

我成功地向数据点添加了onclick事件。
但我想在标签上添加onclick事件（例如01、02、03、04、05）
有人知道怎么做吗？
我用于数据点的代码是这样的：

var options = {
  chart: {
    height: 400,
    type: 'line',
    stacked: false,
    events: {
      dataPointSelection: (event, chartContext, config) => { 
      var selecteddate = pad(config.dataPointIndex + 1, 2);
      console.log(selecteddate);    
     }
   }
 }

这有效，但是如何向标签添加事件？
还是不可能？

Answer 1

我设法通过向页面添加事件监听器来做到这一点。
它可能不是标签，但工具提示也很棒。

$(".apexcharts-xaxistooltip").click(function(){
    var selecteddate = $(this).text();
    // do something
});

此后，我还覆盖了工具提示的CSS。

.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}
.apexcharts-xaxistooltip{
  opacity: 1;
  pointer-events: all;
}
.apexcharts-xaxistooltip:hover{
  background: #46A7B3;
  color: white;
  cursor: pointer;
}

这给了我很好的悬停效果和可点击的光标。
这样，工具提示就可以单击，并且在悬停时不会消失。

Answer 2

有一段时间，我遇到了同样的问题，如果有人遇到需要在标签上使用onClick的情况，这就是我的解决方法：

componentDidMount () {
    //get the DOM elements of the labels , classes may vary so check in dev tools.
    const labels = document.querySelectorAll('.apexcharts-text.apexcharts-yaxis-label')

    // you'll get NodeList so iterate & add click event listeners 
        labels.forEach(item => {
          item.addEventListener('click', event => {
            // do whatever onClick
            console.log(event.target)
          })
        })
      }