英文:
How to coustomise the Y-axis grid line css properties in c3js
问题
我已创建了一个包含时间序列数据的折线图。我使用自定义的X轴网格线，并通过编辑它们的CSS来增加它们的间距。我想要增加Y轴上网格线的间距。这是我所做的：
// 增加X轴网格线间距
.c3-xgrid-line{
stroke-dasharray: 10,5;
}
// 增加Y轴网格线间距
.c3-ygrid-line {
stroke-dasharray: 10,5;
}
以上代码只能改变X轴网格线的属性。
英文:
I have created a line chart with time series data. I used custom X-axis grid lines and increased their spacing by editing their CSS. I would like to increase the spacing between the grid lines on the Yaxis. Here's what I did:
`// to increase the X grid line spacing
.c3-xgrid-line{
stroke-dasharray: 10,5;
}
// to increase the Y grig line spacing
.c3-ygrid-line {
stroke-dasharray: 10,5;``
}`
The X grid line property was the only one I could change with the above
答案1
得分: 1
自定义网格线最终使用类名.c3-(x或y)grid-lines，这就是它适用于x轴的原因。
如果它们只是标准的，即通过grid: { y: { show: true }}设置，
那么它们位于不同的组元素中，并具有类名.c3-(x或y)grid。
简而言之：在您的CSS中将.c3-ygrid-line更改为.c3-ygrid。
英文:
Custom grid lines end up with the class .c3-(x or y)grid-lines which is why it works for x
If they're just standard i.e. set with grid: { y: { show: true }}
then they're in a different group element and given the .c3(x or y)grid class
Long story short: change .c3-ygrid-line to .c3-ygrid in your css
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论