0

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

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

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

我查看了 chartist 的 API/文档，但找不到我正在寻找的设置。我也尝试不设置图表的高度，但图表师只会使用可用的完整高度，并且仍然根据可用高度隔开条形。

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

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

4

1 回答 1

1

因此，在没有代码的情况下，我只是在站点的示例部分处理了水平条码示例。

这些线条是 svg，创建为指定 x 和 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);
}

这里有一些关于 MDN 的CSS3 转换文档： translate。

于 2016-06-22T15:53:27.913 回答