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

问题描述

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

解决方案

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

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

1. 创建一个函数以将图例工具提示 html 和 css 附加到图表的图例系列容器中.
2. 设置在这两个顶点图表事件中调用该函数: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/p>

var chartData = [{name: '销售 1990',数据:[30,40,35,50,49,60,70,91,125]，描述:这是 1990 年的销售数据"},{name: '销售额 2000',数据:[33,43,37,53,52,100,73,94,128]，描述:这是销售 2000 数据"}];var setLegendTooltip = 函数(){chartData.forEach(函数(cd,i){让 idx = i + 1;让 id = '.apexcharts-legend-series[rel="'+ idx +'"]';let tooltipHtml = '<div class="legend-tooltip-' + idx + '">'+ cd.description +'</div>';让 tooltipCss ='<style type="text/css">'+'.legend-tooltip-' + idx + '{' +'显示:无；'+'位置:绝对;'+'左:25%;'+'底部:40%;'+'边框:1px 纯红色；'+'边框半径:2px;'+'背景颜色:#eee;'+'z-index: 1500;'+'字体大小:13px;'+'文本溢出:省略号；'+'空白:nowrap;'+'溢出:隐藏；'+'宽度:110px;'+'}' +'.apexcharts-legend-series[rel="' + idx + '"] {' +'位置:相对;'+'}' +'.apexcharts-legend-series[rel="' + idx +'"]:not(.apexcharts-inactive-legend):hover >.legend-tooltip-' + idx + '{' +'显示:块' +'}' +'</style>';$(id).append(tooltipCss + tooltipHtml);})$(".apexcharts-legend").addClass("apexcharts-legend-default-overflow");};变量选项 = {图表: {类型:'线'，背景:'#fff',事件:{更新:函数(chartContext，配置){setLegendTooltip();},挂载:函数(chartContext，配置){setLegendTooltip();}}},标题: {text: '1990 - 2000 年的销售额',对齐:'左'},系列:图表数据，坐标轴:{类别:[1991,1992,1993,1994,1995,1996,1997,1998,1999]},传奇: {显示:真实，},主题: {模式:'光'，调色板:'调色板1'，}}var chart = new ApexCharts(document.querySelector("#chart"), options);chart.render();

.apexcharts-legend-default-overflow {溢出:未设置！重要；};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></脚本><script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/apexcharts.min.js"></script>

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

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