到如何在 C3 中设置单个列/条形的样式.js
to How do I style an individual column / bar in C3.js?
我是 c3.js/可视化的新手,正在尝试在 C3 中设置 data1 条/列的样式.js,我有以下 css,可以选择所有条形图:
#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
}]
}
}
});
如果要为表示 data1 的所有条形(而不仅仅是单个条形)设置颜色,则可以将 colors 属性添加到数据定义中:
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。
相关文章:
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- 一个正则表达式,用于从JS中的HTML标记中删除id、样式和类属性
- d3.js圆的半径是否可以由样式属性指定
- 如何在Angular js中集成其他页面中的样式
- 在js中访问元素时不透明度和样式未定义,但在css中定义
- 挖空 JS 样式绑定导致错误
- 将数据表.js样式应用于 AJAX 加载的表
- Vue.js样式表资源
- 将会话值添加到 js 样式文件
- Node.js-样式没有't应用于页面&谷歌Chrome表示:未捕获语法错误:意外的令牌<
- Video.js样式不覆盖默认视频样式
- 将变量传递给LESS.js样式表
- Cytoscape.js:样式不适用
- 当从php程序运行时,JS样式块不会执行
- 如果在JS或CSS中没有指定属性,我如何找到JS样式属性的值?
- Ruby中的JS样式对象引用
- js样式不适用于所有页面
- js样式的属性返回空白
- 用selected .js样式化下拉菜单html
- 可能添加CSS到一些JS样式禁用复选框文本