Question

有没有一种方法可以通过css来实现纯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,       
}

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的第一个问题之后，我感到很傻。一位同事提到我应该尝试使用属性error[E0507]: cannot move out of an `Rc` --> src/lib.rs:42:22 | 42 | &(*Rc::try_unwrap(Rc::clone(V)).unwrap_err()) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ cannot move out of an `Rc` error[E0507]: cannot move out of data in a `&` reference --> src/lib.rs:42:22 | 42 | &(*Rc::try_unwrap(Rc::clone(V)).unwrap_err()) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | | | cannot move out of data in a `&` reference | cannot move。

因此

stroke-dasharray: 0

根据MDN， 笔划-破折号阵列 属性是一种表示属性，用于定义用于绘制形状轮廓的破折号和间隙的图案。

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

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

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

1 个答案: