Apexcharts 热图：悬停时显示每个系列数据的精确 x 值

Question

我正在尝试使用 apexcharts 创建一个热图，显示一年中每周的活动频率（查看 github 贡献热图）。我的目标是显示一个工具提示，每当用户将鼠标悬停在单元格上时，该工具提示就会显示特定日期、工作日和频率值。示例：

 ------------
| 2022-02-20 |
| ---------- |
| Sunday: 40 |
 ------------

这是我到目前为止所尝试的：

var options = {
    series: [],
    chart: {
      height: 350,
      type: 'heatmap',
    },
    dataLabels: {
      enabled: true
    },
    xaxis: {
      labels: {
        show: false
      },
      tooltip: {
        enabled: false,
      },
    },
    tooltip: {
      shared: false,
      followCursor: true,
      intersect: false,
      x: {
        show: true,
        format: 'dd MMM'
      },
    }
};

这是一个简化的示例系列：

var series = [
    {
    name: 'Sunday',
    data: [{
        x: '2022-02-20',
        y: 40
        }]
    },
    {
    name: 'Monday',
    data: [{
        x: '2022-02-21',
        y: 0
        }]
    },
    {
    name: 'Tuesday',
    data: [{
        x: '2022-02-22',
        y: 5
        }]
    },
    {
    name: 'Wednesday',
    data: [{
        x: '2022-02-23',
        y: 100
        }]
    },
    {
      name: 'Thursday',
      data: [{
        x: '2022-02-24',
        y: 17
      }]
    },
    {
      name: 'Friday',
      data: [{
        x: '2022-02-25',
        y: 4
      }]
    },
    {
      name: 'Saturday',
      data: [{
        x: '2022-02-26',
        y: 90
      }]
    },
];
options.series = series;

这里发生的情况是，apexcharts 垂直显示 2022 年 2 月 20 日（星期日）到 2022 年 2 月 26 日（星期六）这一周的热图从下到上（似乎以相反的顺序显示）。如果用户将鼠标悬停在星期日单元格上，它会显示我在开始时提供的确切工具提示，其中包含值 2022-02-20、星期日和 40。但是，当用户将鼠标悬停在星期一至星期六的单元格上时，工具提示会显示正确的工具提示除 x 值之外的值。它仍然显示 2022-02-20。

据我了解，图表将列中的第一个 x 值视为该列的类别。这意味着无论用户将鼠标悬停在星期六、星期五还是任何其他日期，它都会显示星期日的 x 值。如何显示悬停单元格的实际 x 值？

更新

这是热图演示

自 2022 年 3 月 1 日起更新

按照 @Patryk 的建议Laszuk，我添加了

formatter: (value,options)=>{
   return options.w.config.series[options.seriesIndex].data[0].x
}

tooltip.x，但这使得所有水平对齐的单元格具有相同的 x 值。

Answer 1

使用格式化程序 https://apexcharts.com/docs/options/工具提示/#xformatter

tooltip: {
  ...
  x: {
    ...
    formatter: (value,options)=>{
      return options.w.config.series[options.seriesIndex].data[0].x
    }
  },
}