我有一个带有x轴类别的c3折线图。
var data = {
x: "x",
columns: [
["x", "a", "b", "c", "d"],
["data1", 0, 1, 2, 3],
["data2", 3, 2, 1, 0],
],
labels: true
};
var axis = {
x: {
type: 'category',
tick: {
centered: true,
},
padding: 0
},
y: {
padding: {bottom:5, top:5}
}
};
ccChartL = c3.generate({
bindto: '#ccLdiv',
data: data,
axis: axis,
transition:{duration: 1000}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="ccLdiv"></div>
在左边,线的起点和轴之间有一个间隙。右边相同。我该如何删除它?我希望行的开头,类别a,在x值为0.我尝试了Stackoverflow的视图答案,但它没有用。填充设置为0.如果我将其设置为任何正值,它只会缩小更多。 提前谢谢。
答案 0 :(得分:1)
-0.5或略小于(-0.49)的负填充将消除这些间隙。
然而,它会略微切断您的第一个和最后一个标签,您可能需要一个类别的公式,例如
padding: -0.5 - (0.01 * no_of_datapoints)