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

Question

有没有办法在不显式声明线值的情况下通过 css 实现实心 c3 网格线？

例子:

C3 的基础 Grid Line example

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,       
}

image of how the CSS above looks with the attributes listed above

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

例子:

C3 Style for Grid example

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

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
    }

我见过其他人问过类似的问题 here

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 网格线的样式是很有可能的 - 如果您知道要使用的属性。