ApexCharts中如何修改水平条形图名称的tooltip文本

嘿，我来帮你搞定这个问题！在ApexCharts里修改水平条形图上那个类别名称的tooltip文本其实不难，核心是用自定义tooltip的配置来实现~

你只需要在图表的配置项里，针对tooltip对象做自定义配置就行。具体来说，就是利用tooltip.custom这个属性，写一个自定义函数来返回你想要显示的内容，而不是用默认的文本。

给你举个实际能用的代码例子，假设你的条形图y轴类别里有"Play maker"这类标签，我们把它的tooltip替换成自定义文本：

var options = {
  chart: {
    type: 'bar',
    height: 350,
    horizontal: true // 你的是水平条形图，这个属性要设为true
  },
  series: [
    {
      name: '你的数据系列名',
      data: [65, 40, 70] // 对应每个类别的数据
    }
  ],
  xaxis: {
    categories: ["Play maker", "得分手", "防守大闸"] // 原始的条形名称
  },
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      // 先做一个名称映射表，把原始标签和你要的tooltip文本对应上
      const labelTooltipMap = {
        "Play maker": "组织核心 - 主导球队进攻节奏",
        "得分手": "主要得分点 - 负责终结进攻",
        "防守大闸": "防线核心 - 专注拦截与抢断"
      };
      // 获取当前悬停的原始标签名
      const originalLabel = w.globals.labels[dataPointIndex];
      // 生成tooltip内容，这里还保留了数值，不需要的话可以删掉这部分
      return `<div class="apexcharts-tooltip">
                <div>${labelTooltipMap[originalLabel] || originalLabel}</div>
                <div>数值: ${series[seriesIndex][dataPointIndex]}</div>
              </div>`;
    }
  }
};

// 渲染图表
var chart = new ApexCharts(document.querySelector("#your-chart-id"), options);
chart.render();

我给你拆解下这段代码的关键点：

• tooltip.custom函数会在鼠标悬停条形时自动触发，它能拿到当前悬停数据的所有细节，比如数据点索引、系列数据这些。
• 我做了个labelTooltipMap的映射表，把每个原始标签和自定义文本对应起来，这样后续要改其他标签的tooltip直接改这个表就行，很方便。
• 加了|| originalLabel的判断，是怕某个标签没在映射表里，这时候就显示原始名称，避免出现空tooltip的情况。

如果你不需要显示数值，只想展示自定义的标签文本，直接把返回的内容简化成<div class="apexcharts-tooltip">${labelTooltipMap[originalLabel] || originalLabel}</div>就可以啦。

备注：内容来源于stack exchange，提问作者user2799412