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

【问题标题】：is it possible to display solid c3 grid lines via CSS instead of default dashed grid line?是否可以通过 CSS 显示实心 c3 网格线而不是默认的虚线网格线？
【发布时间】：2019-01-02 19:40:45
【问题描述】：

有没有办法通过 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

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

例子：

C3Style 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

【问题讨论】：

标签： css graph c3.js gridlines

【解决方案1】：

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

因此，

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

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

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

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

【讨论】：

感谢您发布问题和自我回答。有用的东西要知道。