Apexcharts.js条形图CSS问题

Question

在尝试使用Apexcharts库渲染图表时，我需要解决一些CSS问题。

我的第一个问题是数据标签在滚动条后面。我希望offsetX保持在20px左右，因为我希望条形图旁边的数据标签。如下图所示，data_10的数据标签位于滚动条的后面：

当数字变大时，它变得更加明显。

我的第二个担心是，是否可以使图形的各个条形的高度固定，并使图形占据100％的高度。这是因为如果有很多数据，则很难读取标签：

此外，如果只有一个（或几个）数据点，则它将占用所有空间，并且您将无法读取数据标签。

因此，是否可以使每个条形高度为50px？由于该图形被包装在允许垂直滚动的容器中，因此可以占用其所需的所有空间。

这是我的代码：https://jsfiddle.net/763mkaze/2/

Answer 1

对如何解决此问题有一个想法。这不是一个很好的解决方案，但是可以。在height属性中，我只是计算数组的长度，然后乘以我想要的每个条形的高度：

const options = {
    chart: {
        height: array.length * 20,
        ...
    },
    ...
}

然后，我将图表包裹在高度固定的div中，并将scroll属性设置为auto：

<div class="graphic-container">
    <!-- Your chart goes here -->
</div>

graphic-container类仅具有以下内容：

.graphic-container {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

Answer 2

1. 您应该尝试几个不同的选项来放置dataLabel。阅读dataLabels guide了解更多信息

2. 条形的高度可以通过barHeight属性options.plotOptions.bar.barHeight

来控制

3. 第三个问题是ApexCharts中的错误，最近已修复-commit of the fix

注意：ApexCharts是一个非常新的库，因此您可能会在GitHub问题上迅速得到响应，直到它流行起来。 （免责声明：我是ApexCharts的作者）