在列标签和X轴标签C3图表之间添加空间

Question

这是图表的样子，我试图在列标签和x轴标签之间留出一定的余量。

我尝试添加此样式

text.c3-axis-x-label {
        margin-top: 10px ;
    }

有没有增加空间的属性？

Answer 1

您需要填充--https://c3js.org/reference.html#padding-bottom

使用您选择的值（以像素为单位）将其添加到图表配置中->

padding: {
    bottom: 50,
},

例如https://jsfiddle.net/56k48r70/

（margin-top无效，因为它是html元素的css属性，而c3都是svg元素）

编辑：

哈，我完全没有正确阅读您的问题。我认为图表底部的文字是图例，而不是x轴标签。

它仍然可行，您还需要更改的是文本标签的“ dy”属性（这是一个属性，而不是css，因此必须在代码中完成）

将此添加到您的配置中：

 onrendered: function () {
                d3.select(this.config.bindto).select(".c3-axis-x-label").attr("dy", "60px");
        },

这将通过更改60px值将x轴标签向下移动任何所需的位置。但是，您仍然需要填充，否则标签可能会移出可见图表区域。即在下面的小提琴中，如果您删除底部填充，则x轴标签将在绿色div下消失：

https://jsfiddle.net/zygrjut4/

对不起，您的q读得不正确！

Answer 2

我观察到在 onrendered 方法中添加处理程序时出现了一些干扰。

您可以使用 X 轴的 height 属性简单地控制它，如下所示，

axis: {
    x: {
        height: 10
    }
}

您可以在官方文档的 this section 中找到更多详细信息。