Question

我正在绘制一个水平堆叠条图。我想控制每个栏上方和下方的空间。您可以使用以下命令指定每个条形本身的高度：

.ct-bar{
    stroke-width: 30px;
}

但是，图表主义者似乎根据您为整个图表指定的高度来确定每个堆栈周围的空间。相反，我想指定每个堆栈周围的高度，并让图表的高度根据要绘制的柱数增长。

我查看了图表的API /文档，但我找不到我要找的设置。我还尝试不设置图表的高度，但是图表师只会使用可用的全高度，并根据可用的高度将空格分开。

有没有办法控制条形周围的间距（而不是条形宽度本身？）。

编辑：我想要做的一个例子是： https://gionkunz.github.io/chartist-js/examples.html#stacked-bar 在堆叠的条形图中，您可以看到Q1，Q2，Q3等。我想控制每个占用的空间量，而不是由图表自动确定。

Answer 1

因此，如果没有代码，我只是在网站的Examples部分处理了水平条形码示例。

这些行是svgs，它们被创建为带有x和amp;的矩形。 y指定的属性

<line y1="29.0892857142857" y2="29.0892857142857" x1="80" x2="289.1640625" class="ct-bar" value="5"></line>

因此，如果您想在使用框架计算之后对其进行调整，则可以使用CSS翻译功能。在这里我只调整系列B，以便第一组水平条保持不变。

.ct-series-b .ct-bar {
    transform: translateY(-4px);
}

以下是有关CSS3 transform: translate的MDN的一些文档。