Javascript 在柱标签和x轴标签之间添加空间c3图表

这是图表的样子，我试图在列标签和x轴标签之间留出一些空白。

我试着加入这种风格

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

是否有任何属性可以增加空间？

填充是您需要的-->

将此值与您选择的值（以像素为单位）一起添加到图表配置-->

e、 g

（页边空白顶部不起作用，因为它是html元素的css属性，而c3是所有svg元素）

编辑：

哈，我完全没有看懂你的问题。我假设图表底部的文本是图例，而不是x轴标签

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

将此添加到您的配置中：

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

这将通过更改60px值来向下移动x轴标签。您仍然需要填充，否则标签可能会移出可见图表区域。i、 e.在以下小提琴中，如果移除底部填充，x轴标签将消失在绿色div下：

---

抱歉没有正确阅读你的q

我观察到在

onrendered

方法中添加处理程序时出现了一些干扰

您只需使用X轴的

height

属性控制它，如下所示

axis: {
    x: {
        height: 10
    }
}

---

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

填充

无效。这可能是因为版本问题吗？

padding

和

onrendered

中的值必须相同吗？在这里，您已经将两个设置为

60px

。我希望填充必须与dy值相同或大于dy值，以确保标签仍保持在图表边界内并保持可见。如果你对这些值进行实验，你会发现在你的案例中什么是有效的。

axis: {
    x: {
        height: 10
    }
}