在 c3js (c3.js) 中更改标签颜色答案

【问题标题】：Change label color in c3js (c3.js)在 c3js (c3.js) 中更改标签颜色
【发布时间】：2014-09-16 15:58:29
【问题描述】：

我有一个非常简单的 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);

【问题讨论】：

标签： javascript css c3.js

【解决方案1】：

你可以用 css 来做；

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

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

要将它们全部涂成黑色，您可以这样做（如果您不希望将其应用于每个图表，请考虑对其进行改进！）：

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

【讨论】：

谢谢！这就像一个魅力。我只是不知道之前将规则应用到哪个类。

【解决方案2】：

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

例如：

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]);

甚至使用循环...

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

【讨论】：

【解决方案3】：

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

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

【讨论】：