如何在页面加载时让ApexCharts无需悬停显示所有Tooltip？

我从ApexCharts演示中复制了一段JavaScript示例代码，想要实现页面加载完成后立即显示所有Tooltip，方便用Browsershot进行打印。

示例代码如下：

var options = {
      series: [{
      name: "sales",
      data: [{
        x: '2019/01/01',
        y: 400
      }, {
        x: '2019/04/01',
        y: 430
      }, {
        x: '2019/07/01',
        y: 448
      }, {
        x: '2019/10/01',
        y: 470
      }, {
        x: '2020/01/01',
        y: 540
      }, {
        x: '2020/04/01',
        y: 580
      }, {
        x: '2020/07/01',
        y: 690
      }, {
        x: '2020/10/01',
        y: 690
      }]
    }],
      chart: {
      type: 'bar',
      height: 380
    },
    xaxis: {
      type: 'category',
      labels: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter()
        }
      },
      group: {
        style: {
          fontSize: '10px',
          fontWeight: 700
        },
        groups: [
          { title: '2019', cols: 4 },
          { title: '2020', cols: 4 }
        ]
      }
    },
    title: {
        text: 'Grouped Labels on the X-axis',
    },
    tooltip: {
      x: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
        }  
      }
    },
    };

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

我尝试了以下代码，但只能显示一个Tooltip，而且鼠标悬停到图表上后Tooltip就会消失：

$('.apexcharts-tooltip').css({ opacity: 1 });
$('.apexcharts-tooltip').show();

ApexCharts默认采用单例Tooltip模式，只会渲染一个Tooltip实例，没有直接显示所有Tooltip的官方API。要实现页面加载时显示所有数据点的Tooltip，需要手动克隆并定位Tooltip元素，具体实现如下：

var options = {
  series: [{
    name: "sales",
    data: [{
      x: '2019/01/01',
      y: 400
    }, {
      x: '2019/04/01',
      y: 430
    }, {
      x: '2019/07/01',
      y: 448
    }, {
      x: '2019/10/01',
      y: 470
    }, {
      x: '2020/01/01',
      y: 540
    }, {
      x: '2020/04/01',
      y: 580
    }, {
      x: '2020/07/01',
      y: 690
    }, {
      x: '2020/10/01',
      y: 690
    }]
  }],
  chart: {
    type: 'bar',
    height: 380,
    events: {
      rendered: function(chart) {
        const chartEl = chart.el;
        const defaultTooltip = chartEl.querySelector('.apexcharts-tooltip');
        if (!defaultTooltip) return;

        // 隐藏默认Tooltip避免干扰
        defaultTooltip.style.display = 'none';

        // 遍历所有数据点生成对应Tooltip
        chart.series.forEach(series => {
          series.dataPoints.forEach(point => {
            const tooltipClone = defaultTooltip.cloneNode(true);
            tooltipClone.style.display = 'block';
            tooltipClone.style.opacity = '1';
            tooltipClone.style.position = 'absolute';

            // 设置Tooltip内容，匹配原formatter逻辑
            const xText = `Q${dayjs(point.x).quarter()} ${dayjs(point.x).format("YYYY")}`;
            const yText = point.y;
            tooltipClone.querySelector('.apexcharts-tooltip-title').textContent = xText;
            tooltipClone.querySelector('.apexcharts-tooltip-series-group .apexcharts-tooltip-text').textContent = yText;

            // 基于数据点坐标定位Tooltip
            const pointCoords = point.seriesPoint.config.dataPointXY;
            tooltipClone.style.left = `${pointCoords.x + 10}px`;
            tooltipClone.style.top = `${pointCoords.y - 40}px`;

            chartEl.appendChild(tooltipClone);
          });
        });

        // 阻止鼠标事件冒泡，避免默认逻辑隐藏Tooltip
        chartEl.addEventListener('mousemove', (e) => {
          e.stopPropagation();
        }, true);
      }
    }
  },
  xaxis: {
    type: 'category',
    labels: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter()
      }
    },
    group: {
      style: {
        fontSize: '10px',
        fontWeight: 700
      },
      groups: [
        { title: '2019', cols: 4 },
        { title: '2020', cols: 4 }
      ]
    }
  },
  title: {
    text: 'Grouped Labels on the X-axis',
  },
  tooltip: {
    x: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
      }  
    }
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

核心说明 #

• 借助rendered事件确保图表完全渲染后再创建Tooltip，避免DOM元素未生成的问题
• 克隆默认Tooltip元素，继承原有样式，无需手动编写复杂CSS
• 通过dataPointXY获取数据点的精确坐标，实现Tooltip的精准定位
• 阻止mousemove事件冒泡，禁用默认Tooltip的交互隐藏逻辑，保证Tooltip持续显示
• 生成的Tooltip都是真实DOM元素，完全兼容Browsershot的打印需求

内容的提问来源于stack exchange，提问作者bbaho