Question

我是c3.js / visualization的新手，我正在尝试在C3.js中设置数据1栏/列的样式，我有以下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
      }]
    }
  }
});

Answer 1

如果您想为表示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了解更多信息。

如何在C3.js中设置单个列/栏的样式？

1 个答案: