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

Question

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

Answer 1

我最终创建了一个自定义图例工具提示，将鼠标悬停在图例系列上时显示。以下是此解决方案的步骤：创建一个函数，将图例工具提示 html 和 css 附加到图表的图例系列容器中。将此函数设置为在这两个 apexcharts 事件中调用：charts.events.updated()和charts.events.mounted()，这是为了确保图例工具提示模板在 apexcharts 中始终可用，因为 apexcharts 将在 apexcharts 内部更新时删除先前附加的自定义图例工具提示模板。并覆盖.apexcharts-legend类的overflow:autoto&nbsp;overflow:unset !important，这是为了避免div.apexcharts-legend在图例工具提示出现时为容器显示滚动条。https://jsfiddle.net/sqiudward/sjgLbup8/61/var chartData = [{&nbsp; &nbsp; name: 'sales 1990',&nbsp; &nbsp; data: [30,40,35,50,49,60,70,91,125],&nbsp; &nbsp; description: 'this is sale 1990 data'&nbsp; },{&nbsp; &nbsp; name: 'sales 2000',&nbsp; &nbsp; data: [33,43,37,53,52,100,73,94,128],&nbsp; &nbsp; description: 'this is sale 2000 data'&nbsp; }];var setLegendTooltip = function(){&nbsp; chartData.forEach(function(cd,i){&nbsp; &nbsp; let idx = i + 1;&nbsp; &nbsp; let id = '.apexcharts-legend-series[rel="'+ idx +'"]';&nbsp; &nbsp; let tooltipHtml = '<div class="legend-tooltip-' + idx + '">'+ cd.description +'</div>';&nbsp; &nbsp; let tooltipCss =&nbsp;&nbsp; &nbsp; &nbsp; '<style type="text/css">' +&nbsp; &nbsp; &nbsp; &nbsp; '.legend-tooltip-' + idx + '{' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'display: none;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'position: absolute;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'left: 25%;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'bottom: 40%;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'border: 1px solid red;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'border-radius: 2px;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-color: #eee;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'z-index: 1500;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'font-size: 13px;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'text-overflow: ellipsis;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'white-space: nowrap;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'overflow: hidden;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'width:110px;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'}' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'.apexcharts-legend-series[rel="' + idx + '"] {' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'position: relative;' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'}' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'.apexcharts-legend-series[rel="' + idx +'"]:not(.apexcharts-inactive-legend):hover > .legend-tooltip-' + idx + '{' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'display: block' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'}' +&nbsp; &nbsp; &nbsp; '</style>';&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $(id).append(tooltipCss + tooltipHtml);&nbsp; &nbsp; })&nbsp; &nbsp; $(".apexcharts-legend").addClass("apexcharts-legend-default-overflow");};var options = {&nbsp; chart: {&nbsp; &nbsp; type: 'line',&nbsp; &nbsp; background: '#fff',&nbsp; &nbsp; &nbsp;events: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;updated: function(chartContext, config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setLegendTooltip();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mounted: function(chartContext, config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setLegendTooltip();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; },&nbsp; title: {&nbsp; &nbsp; &nbsp;text: 'Sales from 1990 - 2000',&nbsp; &nbsp; &nbsp;align: 'left'&nbsp; },&nbsp; series: chartData,&nbsp; xaxis: {&nbsp; &nbsp; categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]&nbsp; },&nbsp; legend: {&nbsp; &nbsp; show: true,&nbsp; &nbsp;&nbsp; },&nbsp;&nbsp;&nbsp; theme: {&nbsp; &nbsp; &nbsp; mode: 'light',&nbsp;&nbsp; &nbsp; &nbsp; palette: 'palette1',&nbsp;&nbsp; }&nbsp;&nbsp;}var chart = new ApexCharts(document.querySelector("#chart"), options);chart.render();.apexcharts-legend-default-overflow {&nbsp; 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>