在列标签和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！