Apex Charts热力图：鼠标悬停时自定义X轴工具提示标签

核心思路 #

利用Apex Charts的自定义Tooltip函数，结合日期计算获取对应星期缩写，将其插入到Tooltip内容中。

步骤1：生成包含星期信息的数据源 #

先确定目标月份的年份（比如2024年），为X轴的01-31号日期计算对应的星期缩写（如Mon、Tue或中文的一、二等），用JavaScript的Date对象实现：

// 示例：目标月份为2024年5月（月份是0基索引，5月对应4）
const targetYear = 2024;
const targetMonth = 4;
const dayAbbrs = [];

for (let day = 1; day <= 31; day++) {
  const date = new Date(targetYear, targetMonth, day);
  // 生成英文星期缩写，若要中文替换成下面注释的代码
  const dayAbbr = date.toLocaleDateString('en-US', { weekday: 'short' });
  // const weekDays = ['日','一','二','三','四','五','六'];
  // const dayAbbr = weekDays[date.getDay()];
  dayAbbrs.push(dayAbbr);
}

// 你的热力图数据源示例
const heatmapData = [
  { x: '01', y: 12 },
  { x: '02', y: 25 },
  // ... 剩余日期的数据
];

步骤2：配置Apex Charts的Tooltip选项 #

在图表配置中，通过tooltip.custom函数自定义hover时的提示内容，匹配对应日期的星期缩写：

const chartOptions = {
  chart: {
    type: 'heatmap',
  },
  xaxis: {
    categories: ['01', '02', /* ... */ '31'], // 你的X轴日期列表
  },
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      const dateStr = w.globals.labels[dataPointIndex];
      const dayAbbr = dayAbbrs[dataPointIndex]; // 对应步骤1生成的星期数组
      const value = series[seriesIndex][dataPointIndex];
      
      // 返回自定义的Tooltip HTML结构
      return `<div class="apexcharts-tooltip">
                <div>${dateStr} (${dayAbbr})</div>
                <div>数值: ${value}</div>
              </div>`;
    }
  },
  // 其他图表配置（如颜色、系列设置等）
};

// 初始化并渲染图表
const chart = new ApexCharts(document.querySelector("#your-chart-id"), chartOptions);
chart.render();

注意事项 #

• 确保dayAbbrs数组的索引顺序和X轴categories的日期顺序完全一致，避免星期匹配错误。
• 若目标月份存在31天以外的日期（如2月、4月等），需调整循环的终止条件，避免生成无效日期。

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