Можно ли отображать сплошные линии сетки c3 через CSS вместо пунктирной линии по умолчанию? - PullRequest
Новая
       33

Можно ли отображать сплошные линии сетки c3 через CSS вместо пунктирной линии по умолчанию?

0 голосов
/ 02 января 2019

есть ли способ получить сплошные линии сетки c3 через 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,       
}

изображение того, как выглядит 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
    }

Я видел, как еще один человек задал похожий вопрос здесь

1 Ответ

0 голосов
/ 02 января 2019

Я чувствую себя довольно глупо, потратив много времени на подготовку заметок, чтобы задать свой первый вопрос по stackoverflow. Коллега упомянул, что я должен попытаться использовать свойство, stroke-dasharray: 0.

Таким образом, 

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

Согласно MDN , атрибут stroke-dasharray является атрибутом представления, определяющим шаблон штрихов и разрывов, используемых для рисования контура фигуры.

После нахождения правильного свойства css я смог найти все виды ресурсов в более тонких точках использования stroke-dasharray .

Короче говоря, очень возможно использовать css для стилизации линии сетки c3 - если вы знаете, какое свойство использовать.

...