apexcharts 添加点击事件到标签

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)
          })
        })
      }

Answer 3

今天（2022 年 5 月 6 日），有一个特定的事件，例如

legendClick: function(chartContext, seriesIndex, config) {
               // get the id of the chart-element to get the specific chart (I have multiple charts on a page)
               console.log('chartConfigId', chartContext.el.id.split("-")[2]);
               console.log('seriesIndex', seriesIndex);
            }

apexcharts 添加点击事件到标签

apexcharts add click event to label

javascript

events

label

apexcharts