Apexcharts：将 xTicks 和标签与热图单元格的开头对齐

Question

我正在使用 Apexcharts 显示热图，效果很好。

但是，我正在努力定位 xAxis 刻度和标签以与热图中单元格的开头对齐。 目前的行为如下：

每个系列有 7 个值，因此 7 个刻度沿 x 轴均匀分布，从而导致偏移。

我想要的是在热图中每个单元格的开头有一个刻度和值（基本上对于具有 7 个值的系列，沿 x 轴有 8 个刻度），以便刻度与单元格对齐，如下所示：

如何实现这一目标？

Answer 1

我找到了一种解决方法来实现整数 x 值，尽管我认为这不是最佳解决方案。

显然，将tickAmount 以及range 属性设置为系列的长度，如果与每个x 值增加1 相结合，可以提供所需的解决方案。

将此添加到图表选项中：

   xaxis: {
      axisTicks: {
        show: true
      },
      tickAmount: 7,
      range: 7,
      labels: {
        show: true
      }
   }

并将该系列的每个 x 值增加 1。

Answer 2

我遇到了类似的问题 - 标签与值不一致：

我能够通过将 X 标签值的类型从数字替换为字符串来修复它：

{
  x: `${label}`, // must be a string!
  y: value
}

修复版本：