如何消除c3js折线图中的轴线溢流
谢尔·帕特尔
如果查看那些红色圆圈区域，则可以看到该轴在左下角溢出，并且在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
}
}
},
....
请注意，outer: falsex和y刻度都添加了。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在c3js中设置样式折线图点的样式
- 2
Excel：消除折线图中的差距
- 3
从morris.js折线图中删除中间的多余x轴线
- 4
如何在Google api折线图中禁用x轴和y轴线
- 5
如何使用D3 js在折线图中使用工具提示
- 6
如何使用D3 js在折线图中使用工具提示
- 7
如何从 selenium webdriver c# 使用 angular JS 构建的折线图中获取值？
- 8
如何通过d3.js绘制折线图？
- 9
C3 JS折线图获取日期错误
- 10
从d3.js中的折线图中删除折线
- 11
从d3.js中的折线图中删除折线
- 12
如何使用dimple.js更改折线图中的折线颜色？
- 13
在c3js的线图中绘制趋势线
- 14
Altair：如何更改折线图中的折线颜色？
- 15
使用CSS模块的Defs模式-修改c3.js折线图中的点以在其中包含图像
- 16
如何设置在快速图表（折线图）中绘制x轴线的位置？
- 17
多行D3.js折线图中的样式工具提示
- 18
在d3.js折线图中永久显示工具提示
- 19
如何在D3折线图中自定义色阶？
- 20
D3：如何在折线图中显示孤点
- 21
D3如何找到折线图中最后一个点的高度
- 22
D3：如何在折线图中显示孤点
- 23
如何在我的 d3 折线图中获得线条和区域的样式？
- 24
如何在 NVD3 折线图中设置启用/禁用数据集？
- 25
删除图表js折线图中的垂直线
- 26
D3JS折线图在折线之间的过渡
- 27
如何使用C＃在折线图中显示标记点
- 28
如何在JavaFX折线图中删除图例
- 29
如何使折线图中的每年变为不同的颜色
我来说两句