我有一张我使用c3.js库制作的图表,我想将y轴的宽度更改为更薄 https://d.pr/free/i/xSbyRB
我试图像这样直接在类中添加样式,但是没有用
.c3-axis-y path {
stroke-width: 1px;
}
我还想像文档中提到的那样沿x轴显示网格,但是它们没有像预期的那样显示
grid: {
x: {
show: true
}
}
请问我该如何解决这两个问题?
答案 0 :(得分:0)
笔划为1px
。我不会做得更薄(因为您将在不同的浏览器中得到混合的结果)。但是,如果通过更改笔触颜色来最小化对比度,则可以获得相同的效果:
/* axis line */
.c3 .domain {
stroke: #eee;
}
/* gradation lines */
.c3 .c3-axis line {
stroke: #eee;
}
/* gradation text */
.c3 .c3-axis text {
fill: #eee;
}
...会做到的。显然,您想用颜色替换#ccc
。
但是,通过查看您发布的图片,您看起来就像在玩fill
的{{1}}属性。您希望将其重置为.c3 .domain
或white
。
transparent
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
/* axis line */
.c3 .domain {
stroke: #eee;
}
/* gradation lines */
.c3 .c3-axis line {
stroke: #eee;
}
/* gradation text */
.c3 .c3-axis text {
fill: #eee;
}