垂直对齐标题APEXCHARTS

Question

我使用Apex图表构建了该图表

但是“图表”标题和标题均未对齐，标题应相对于图形对齐，而标题应垂直对齐。

通过放置属性align: 'center'

来对齐标题

但是我的主要问题出在图例中，我在文档后面浏览，发现此命令verticalAlign: 'middle'在“ legend：”属性中使用。

有人知道如何使其正常工作吗？

Answer 1

您将需要在图表对象内添加图例键，并用包含“ verticalAlign：'middle'”属性的对象进行填充。 因此，您最终将添加以下内容：

 legend: {verticalAlign: 'middle'}

下面是一个示例：

var options = {
  chart: {
    type: 'line'
  },
  legend: {
  verticalAlign: 'middle'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

Answer 2

图例没有名为verticalAlign的属性。

您可以使图例与CSS垂直对齐

.apexcharts-legend {
  justify-content: center;
}

Answer 3

垂直对齐图例的解决方案是：

.apexcharts-legend {
  justify-content: center !important;
  top: 0 !important;
}

因为您必须强制覆盖默认值 justify-conent: flex-start

编辑： 您还需要 top: 0 !important 才能真正将其居中，但这可能会弄乱您的其他图表

我想这个答案对你来说太晚了一年，但也许对其他人有帮助。