我正在绘制水平堆积条形图。我想控制每个栏上方和下方的空间。您可以使用以下方法指定每个栏本身的高度:
.ct-bar{
stroke-width: 30px;
}
但是，chartist 似乎根据您为整个图表指定的高度来确定每个堆栈周围的空间。相反，我想指定每个堆栈周围的高度，并让图表的高度根据要绘制的条数增长。
我查看了 chartist 的 API/文档，但找不到我正在寻找的设置。我也尝试过不设置图表的高度，但图表师只会使用可用的完整高度，并且仍然根据可用高度将条形间隔开。
有没有办法控制条周围的间距(而不是条宽度本身？)。
编辑: 我正在尝试做的一个例子是: https://gionkunz.github.io/chartist-js/examples.html#stacked-bar 在该堆叠条形图中，您可以看到 Q1、Q2、Q3 等。我想控制每个占据的空间量，而不是让图表自动确定。
最佳答案
因此，在没有代码的情况下，我只是处理了 Examples 上的水平条形码示例网站的一部分。
线条是创建为具有指定 x 和 y 属性的矩形的 svg
<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 文档.
关于javascript - 使用 chartist.js 控制堆叠条周围的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37972388/