如果你看一下那些红色圆圈区域,你会发现轴在左下角溢出,并且在 Y 轴顶部和 X 轴末端有轴刻度。
我为轴和 c3 图表配置唯一的自定义 CSS:
.tick line {
display: none;
}
var rateConfig = {
bindto: '#line-chart',
data: {
x: 'date',
xFormat: '%m%d',
columns: [],
},
legend: {
show: false,
},
point: {
r: 4,
},
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
},
max: 100,
padding: {
top: 0,
bottom: 0,
},
},
x: {
type: 'timeseries',
tick: {
culling: false,
},
},
},
color: {
pattern: [colors['Rate1'], colors['Rate2'], colors['Rate3']],
},
grid: {
y: {
lines: [
{value: 25},
{value: 50},
{value: 75},
{value: 100},
],
},
},
最佳答案
看看这个:
http://c3js.org/reference.html#axis-x-tick-outer
您只需更改对rateConfig 的调用,如下所示:
....
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
outer: false
},
max: 100,
padding: {
top: 0,
bottom: 0
}
},
x: {
type: 'timeseries',
tick: {
culling: false,
outer: false
}
}
},
....
注意 x 和 y 刻度都添加了 outer: false
。
关于javascript - 如何消除c3js折线图中的轴线溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30335789/