将鼠标悬停在ApexCharts.js中的图例系列上时如何显示图例工具提示 [英] How to show legend tooltip when hover on legend series in ApexCharts.js

问题描述

当前apexchart v3.19.3中没有此类功能，有人可以解决吗?

解决方案

我最终创建了一个自定义的图例工具提示，将其悬停在图例系列上时即可显示.

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

1. 创建一个函数，将图例工具提示html和css附加到图表的图例系列容器中.
2. 将此函数设置为在以下两个apexcharts事件中调用:charts.events.updated()和charts.events.mounted()，这是为了确保图例工具提示模板始终在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/apexcharts@3.19.3/dist/apexcharts.min.js"></script>

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

Currently there is no such feature in apexchart v3.19.3, does anyone have a work around for this?

解决方案

I end up created a custom legend tooltip to be shown when hovered on legend series.

below are the steps for this solution:

1. create a function to append legend tooltip html and css into to the chart's legend series container.
2. set this function to be called in these two apexcharts events: charts.events.updated() and charts.events.mounted(), this is to ensure the legend tooltip template is always available in apexcharts, since the apexcharts will remove previously appended custom legend tooltip template whenever the apexcharts updates internally.
3. and overwrite .apexcharts-legend class's overflow:auto to overflow:unset !important, this is to avoid scrollbar showing up for the div.apexcharts-legend container when legend tooltip shows up.

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>

这篇关于将鼠标悬停在ApexCharts.js中的图例系列上时如何显示图例工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！