javascript - 有没有一种方法可以设置c3.js中的x和y轴样式？

Question

我有我使用c3.js库制作的这张图表，我想将y轴的宽度更改为更薄
https://d.pr/free/i/xSbyRB

我试图像这样直接在类中添加样式，但是没有用

.c3-axis-y path {
 stroke-width: 1px;
}

我还想像文档中提到的那样沿x轴显示网格，但是它们没有像预期的那样显示

grid: {
  x: {
    show: true
  }
}

我如何才能解决这两个问题？

Answer 1

笔划是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的 .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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.1/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.1/c3.min.css" rel="stylesheet"/>

<div id="chart"></div>