时间戳

首页 > 解决方案 > Apexcharts.js 条形图 css 问题

css - Apexcharts.js 条形图 css 问题

问题描述

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

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

最后一个数据点的数据标签被裁剪掉

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

我的第二个问题是是否有可能使图表的各个条形的高度固定并让图表采用 100% 的高度。这是因为如果有很多数据，很难读取标签：

太多的数据点使图表难以阅读

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

一个或几个数据条目将裁剪出数据标签

因此，是否可以将每个条形高度设为50px例如？该图可以占用它需要的所有空间，因为它被包装在一个允许垂直滚动的容器中。

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

标签： cssapexcharts

解决方案

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

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

然后，我将我的图表包装在一个div具有固定高度的图表中，并将滚动属性设置为自动：

<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;
}

推荐阅读