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

Question

有没有一种方法可以通过 css 实现实心 c3 网格线，而无需显式声明线值？

示例：

C3 的基本网格线示例

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

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

示例：

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

在花了很多时间准备笔记并在 Stack Overflow 上问第一个问题之后，我觉得自己很傻。一位同事提到我应该尝试使用该属性，

stroke-dasharray: 0;

。

因此，

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

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

找到正确的 CSS 属性后，我能够找到有关使用 lines-dasharray 的各种资源。

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

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