如何在ApexCharts.js中将鼠标悬停在图例系列上时显示图例工具提示

Question

目前apexchart v3.19.3中没有这样的功能，有人能解决这个问题吗？

Answer 1

我最终创建了一个自定义图例工具提示，当悬停在图例系列上时将显示该工具提示。

以下是该解决方案的步骤：

1. 创建一个函数，将图例工具提示html和css附加到图表的图例系列容器中
2. 将此函数设置为在以下两个apexcharts事件中调用：charts.events.updated()和charts.events.mounted()，这是为了确保图例工具提示模板在apexchart中始终可用，因为每当apexchartt内部更新时，apexchart斯都会删除以前附加的自定义图例工具提示模板
3. 并覆盖.apexcharts-legend类的overflow:auto到overflow:unset !important，这是为了避免在出现图例工具提示时出现div.apexcharts-legend容器的滚动条

https://jsfiddle.net/sqiudward/sjgLbup8/61/

var chartData = [{
    name: 'sales 1990',
    data: [30,40,35,50,49,60,70,91,125],
    description: 'this is sale 1990 data'
  },{
    name: 'sales 2000',
    data: [33,43,37,53,52,100,73,94,128],
    description: 'this is sale 2000 data'
  }];
var setLegendTooltip = function(){
  chartData.forEach(function(cd,i){
    let idx = i + 1;
    let id = '.apexcharts-legend-series[rel="'+ idx +'"]';
    let tooltipHtml = '<div class="legend-tooltip-' + idx + '">'+ cd.description +'</div>';
    let tooltipCss = 
      '<style type="text/css">' +
        '.legend-tooltip-' + idx + '{' +
            'display: none;' +
            'position: absolute;' +
            'left: 25%;' +
            'bottom: 40%;' +
            'border: 1px solid red;' +
            'border-radius: 2px;' +
            'background-color: #eee;' +
            'z-index: 1500;' +
            'font-size: 13px;' +
            'text-overflow: ellipsis;' +
            'white-space: nowrap;' +
            'overflow: hidden;' +
            'width:110px;' +
         '}' +
         
         '.apexcharts-legend-series[rel="' + idx + '"] {' +
              'position: relative;' +
         '}' +
         
         '.apexcharts-legend-series[rel="' + idx +'"]:not(.apexcharts-inactive-legend):hover > .legend-tooltip-' + idx + '{' +
              'display: block' +
         '}' +
      '</style>';
        
    $(id).append(tooltipCss + tooltipHtml);
    })
    $(".apexcharts-legend").addClass("apexcharts-legend-default-overflow");
};
var options = {
  chart: {
    type: 'line',
    background: '#fff',
     events: {
         updated: function(chartContext, config) {
            setLegendTooltip();
         },
         mounted: function(chartContext, config) {
            setLegendTooltip();
         }
    }
  },
  title: {
     text: 'Sales from 1990 - 2000',
     align: 'left'
  },
  series: chartData,
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  },
  legend: {
    show: true,
   
  },
  
  theme: {
      mode: 'light', 
      palette: 'palette1', 
  }
  
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

.apexcharts-legend-default-overflow {
  overflow: unset !important;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.19.3/dist/apexcharts.min.js"></script>
<div id="chart"></div>