如何在 C3.js 中设置单个列/栏的样式?
to How do I style an individual column / bar in C3.js?
我是 c3.js/可视化的新手,正在尝试在 C3.js 中设置数据 1 bar/column 的样式,我有以下 css 并且可以 select 所有酒吧:
#chart .c3-chart-bars .c3-shape {
stroke: black !important;
stroke-width: 2 !important;
}
我可以像这样设置我想要设置样式的栏的填充不透明度:
.c3-bars-data1 {
fill-opacity: 0 !important;
}
但是,如果我尝试使用相同的方式设置笔划,select或者,没有任何反应:
.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
}]
}
}
});
如果您打算为代表数据 1 的所有条形图(不仅仅是单个条形图)设置颜色,您可以将颜色属性添加到数据定义中:
data:{
colors: {
'data1':'#FF0000'
},
...
有关详细信息,请参阅:http://c3js.org/reference.html#data-colors
编辑:TS 提到他想要造型而不仅仅是颜色,同样的事情,有点复杂
data:{
classes: {
data1: 'additional-data1-class',
data2: 'additional-data2-class',
}
...
这会将 c3-target-additional-data1-class 添加到 data1 条中,您可以在 CSS 中对其进行定义。请参阅:http://c3js.org/reference.html#data-classes 了解更多信息。
我是 c3.js/可视化的新手,正在尝试在 C3.js 中设置数据 1 bar/column 的样式,我有以下 css 并且可以 select 所有酒吧:
#chart .c3-chart-bars .c3-shape {
stroke: black !important;
stroke-width: 2 !important;
}
我可以像这样设置我想要设置样式的栏的填充不透明度:
.c3-bars-data1 {
fill-opacity: 0 !important;
}
但是,如果我尝试使用相同的方式设置笔划,select或者,没有任何反应:
.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
}]
}
}
});
如果您打算为代表数据 1 的所有条形图(不仅仅是单个条形图)设置颜色,您可以将颜色属性添加到数据定义中:
data:{
colors: {
'data1':'#FF0000'
},
...
有关详细信息,请参阅:http://c3js.org/reference.html#data-colors
编辑:TS 提到他想要造型而不仅仅是颜色,同样的事情,有点复杂
data:{
classes: {
data1: 'additional-data1-class',
data2: 'additional-data2-class',
}
...
这会将 c3-target-additional-data1-class 添加到 data1 条中,您可以在 CSS 中对其进行定义。请参阅:http://c3js.org/reference.html#data-classes 了解更多信息。