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

Question

目前 apexchart v3.19.3 中没有此类功能，有人可以解决此问题吗？

Answer 1

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

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

1. 创建一个函数，将图例工具提示 html 和 css 附加到图表的图例系列容器中。
2. 设置此函数在以下两个 apexcharts 事件中调用:charts.events.updated() 和 charts.events.mounted()，这是为了确保图例工具提示模板在 apexcharts 中始终可用，因为每当 apexcharts 内部更新时，apexcharts 都会删除先前附加的自定义图例工具提示模板。
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a1b0a5b8a3a8a1b2b4b380f3eef1f9eef3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/apexcharts.min.js"></script>

<div id="chart"></div>