javascript - 在列标签和 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 轴标签向下移动任意幅度。不过，您仍然需要填充，否则标签可能会移出可见图表区域。即在下面的 fiddle 中，如果您删除底部填充，x 轴标签将在绿色 div 下消失:

https://jsfiddle.net/zygrjut4/

抱歉没有正确阅读您的问题!