如何在 ApexCharts.js 中的图例系列上悬停时显示图例工具提示答案

【问题标题】：How to show legend tooltip when hover on legend series in ApexCharts.js如何在 ApexCharts.js 中的图例系列上悬停时显示图例工具提示
【发布时间】：2020-11-13 14:04:28
【问题描述】：

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

【问题讨论】：

标签： javascript hover tooltip legend apexcharts

【解决方案1】：

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

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

创建一个函数，将图例工具提示 html 和 css 附加到图表的图例系列容器中。
将此函数设置为在这两个 apexcharts 事件中调用：charts.events.updated() 和 charts.events.mounted()，这是为了确保图例工具提示模板始终在 apexcharts 中可用，因为每当apexcharts 内部更新。
并将.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>

【讨论】：