是否可以通过 CSS 显示实心 c3 网格线而不是默认的虚线网格线？

Question

有没有办法通过css实现实心c3网格线而无需明确声明线值？

例子：

C3 的基本Grid Line 示例

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250, 120, 200]
        ]
    },
    grid: {
        x: {
            show: true
        },
        y: {
            show: true
        }
    }
});

一般来说，我发现我可以使用以下 CSS 更改网格的默认样式：

.c3 .c3-grid line {
  stroke: pink,       
  stroke-width: 4,  -> if width can be changed, why can't I use css to make grid line solid?
  opacity: 0.3,      
  fill: blue,       
}

上面的 CSS 与上面列出的属性的外观图像

我知道可以通过像这样显式声明它们来实现实心网格线

例子：

网格示例的C3样式

当我说明确声明它们时，我指的是这样一个事实，即为了显示实心网格线，您必须实际给出要显示的线。像下面的例子：

grid: {
    x: {
        lines: [{value: 2}, {value: 4}]
    },
    y: {
        lines: [{value: 500}, {value: 800}]
    }
}

所以我问，是否可以使用css使c3的默认虚线网格线成为实线？

您不能只使用以下内容似乎很愚蠢：

.c3 .c3-grid line {
      stroke: pink,       
      stroke-width: 4,
      opacity: 0.3,      
      fill: blue,
      dashed: false,   <-- insert whatever property would give  me solid grid lines
    }

我看到另一个人在这里问过类似的问题

Answer 1

在花了很多时间准备我的笔记来问我关于 stackoverflow 的第一个问题之后，我觉得很傻。一位同事提到我应该尝试使用属性stroke-dasharray: 0.

因此，

.c3 .c3-grid line {
  stroke: pink,
  stroke-dasharray: 0,  <--- turns dashed lines solid
}

根据MDN，stroke-dasharray属性是一个表示属性，它定义了用于绘制形状轮廓的虚线和间隙的模式。

找到正确的 css 属性后，我能够在使用stroke-dasharray的细点上找到各种资源。

• https://css-tricks.com/almanac/properties/s/stroke-dasharray/
• https://www.w3schools.com/graphics/svg_stroking.asp

简而言之，如果您知道要使用什么属性，则很有可能使用 css 来设置 c3 网格线的样式。