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

Question

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

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

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

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

如何做到这一点？

标签： javascriptreactjsapexcharts

Answer 1

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

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

将此添加到图表选项中：

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

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