Question

我有一个非常简单的c3js饼图，但白色标签在馅饼的黄色切片内丢失（具有该颜色）。有没有办法改变那个标签的颜色？或者，有没有办法改变所有标签的颜色？

      var chart = c3.generate({
    data: {
      columns: [
        ['PC', 25077394],
        ["Tablet", 3240595],
        ["Mobile", 6427981],
      ],
      type : 'pie'
    },
    legend: {
    position: 'bottom'

},
    axis: {
      x: {
        label: 'Sepal.Width'
      },
      y: {
        label: 'Petal.Width'
      }
    },
  });

  setTimeout(function () {
    chart.data.colors({PC: '#2C9AB7',Tablet: '#FEBE12', Mobile: '#DB3A1B'});
  }, 1000);

Answer 1

你可以用css;

来做

要仅更改黄色，您可以声明以下类：

.c3-target-Tablet text {
   fill: black;
}

将它们全部涂成黑色你可以做这样的事情（如果你不希望它适用于每个图表，请考虑改进它！）：

.c3-chart-arc text {
    fill: black;
}

Answer 2

在这种情况下，下面的css代码对我有帮助：

.c3-chart-arc text {
    fill: black !important;
}

Answer 3

您还可以使用D3更改颜色。

例如：

ID

您还可以使用颜色数组：

d3.select(".c3-target-PC > text").style("fill",#2C9AB7);

甚至使用循环...

var colors = [['PC','#2C9AB7'],['Table','#FEBE12'],['Mobil','#DB3A1B']];
d3.select(".c3-target-"+colors[0][0]+" + " > text").style("fill",colors[0][1]);

更改c3js中的标签颜色（c3.js）

3 个答案: