Как создать отдельный столбец/столбец в C3.js?

Question

Я новичок в c3.js/визуализацию и пытаюсь стилизацией data1 бара/столбца в C3.js, у меня есть следующие C и выбрать все бары:

#chart .c3-chart-bars .c3-shape { 
    stroke: black !important; 
    stroke-width: 2 !important; 
} 

И я могу установить заливку непрозрачность бара я хочу стиль, как так:

.c3-bars-data1 { 
    fill-opacity: 0 !important; 
} 

Однако, если я пытаюсь установить инсульт, используя тот же селектор, ничего не происходит:

.c3-bars-data1 { 
    fill-opacity: 0 !important; 
    stroke: black !important; 
    stroke-weight: 1 !important; 
} 

Только с помощью C3- bars-data1 Я не могу изменить цвет заливки или любой другой вариант, который кажется.

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
    columns: [ 
     ['data1', -30, 200, 200, 400, -150, 250], 
     ['data2', 130, 100, -100, 200, -150, 50], 
     ['data3', -230, 200, 200, -300, 250, 250] 
    ], 
    type: 'bar', 
    groups: [ 
     ['data1', 'data2'] 
    ] 
    }, 
    grid: { 
    y: { 
     lines: [{ 
     value: 0 
     }] 
    } 
    } 
}); 

Answer 1

Если вы имели в виду, чтобы установить цвет для всех баров, представляющих data1 (а не только один бар), вы можете добавить цвета атрибута к определению данных:

data:{ 
    colors: { 
    'data1':'#FF0000' 
    }, 
... 

см: http://c3js.org/reference.html#data-colors для получения дополнительной информации

редактировать: TS отметил он хотел стилизации не только цвет, то же самое дело, немного более сложный

data:{ 
    classes: { 
    data1: 'additional-data1-class', 
    data2: 'additional-data2-class', 
    } 
... 

это добавит c3-target-дополнительный-data1-класс в строки данных1, которые вы можете определить в своем CSS. см.: http://c3js.org/reference.html#data-classes для получения дополнительной информации.