ApexCharts分组行时间线图表tooltip报错：opts.ctx.rangeBar.getTooltipValues不是函数

一、先处理报错问题 #

你遇到的opts.ctx.rangeBar.getTooltipValues is not a function报错是ApexCharts官方示例的已知bug，大概率是版本兼容性问题，优先试试这两步：

• 把ApexCharts升级到最新稳定版，很多版本迭代会修复这类底层方法缺失的问题；
• 要是升级后还没解决，直接用自定义Tooltip替代官方默认逻辑，这也是最稳妥的方案。

二、自定义Tooltip获取条形段名称及数据 #

自定义Tooltip时，你可以通过ApexCharts提供的全局数据对象拿到所有需要的信息，包括条形段名称（就是示例里的「George Washington」这类内容），具体代码示例如下：

var options = {
  chart: {
    type: 'rangeBar',
    height: 350
  },
  series: [
    {
      name: '美国总统任期',
      data: [
        {
          x: 'George Washington',
          y: [new Date('1789-04-29').getTime(), new Date('1797-03-03').getTime()]
        },
        {
          x: 'John Adams',
          y: [new Date('1797-03-03').getTime(), new Date('1801-03-03').getTime()]
        }
      ]
    }
  ],
  xaxis: {
    type: 'datetime'
  },
  tooltip: {
    // 自定义Tooltip逻辑
    custom: function({ seriesIndex, dataPointIndex, w }) {
      // 获取当前悬停的条形段数据
      const currentData = w.globals.series[seriesIndex].data[dataPointIndex];
      // 提取条形段名称（就是x字段的值）
      const segmentName = currentData.x;
      // 把时间戳转成可读日期格式
      const startDate = new Date(currentData.y[0]).toLocaleDateString('zh-CN');
      const endDate = new Date(currentData.y[1]).toLocaleDateString('zh-CN');
      
      // 返回自定义的Tooltip HTML结构
      return `
        <div style="padding: 8px; background: #fff; border: 1px solid #eee; border-radius: 4px;">
          <div style="font-weight: bold; margin-bottom: 4px;">${segmentName}</div>
          <div>任期：${startDate} 至 ${endDate}</div>
        </div>
      `;
    }
  }
};

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

关键数据获取说明 #

• 条形段名称：从w.globals.series[seriesIndex].data[dataPointIndex].x拿到，这就是你要的Tooltip标题；
• 系列名称：如果是多系列图表，用w.globals.seriesNames[seriesIndex]可以获取当前系列的名称；
• 时间范围：currentData.y[0]是起始时间戳，currentData.y[1]是结束时间戳，转成你需要的日期格式即可。

这个方案完全绕过了官方Tooltip的bug，还能自定义Tooltip的样式和内容，比默认逻辑更灵活。

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