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-02-20（星期日）到 2022-02-26（星期六）这一周的热图（似乎以相反的顺序显示） .如果用户将鼠标悬停在星期日单元格上，它会显示我在开头提供的确切工具提示，值为 2022-02-20、星期日和 40。但是，当用户将鼠标悬停在星期一至星期六的单元格上时，工具提示会显示正确的x 值以外的值。它仍然显示 2022-02-20.

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

更新

这是热图的演示

更新于 2022-03-01

根据@Patryk Laszuk 的建议，我添加了

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

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

Answer 1

使用formatterhttps://apexcharts.com/docs/options/tooltip/#xformatter

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

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

Apexcharts Heatmap: display exact x value on hover for each series data

javascript

heatmap

apexcharts