将鼠标悬停在 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:autoto 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>