javascript 在 c3js (c3.js) 中更改标签颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25873398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change label color in c3js (c3.js)
提问by neelshiv
I have a very simple c3js pie chart, but the white labels get lost inside the yellow slice of the pie (hast to be that color). Is there any way to change the color of just that label? Alternatively, is there a way to change the color of all labels?
我有一个非常简单的 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);
回答by Sebastian Piu
You can do it with css;
你可以用 css 来做；
To only change the yellow one you could declare the following class:
要仅更改黄色，您可以声明以下类：
.c3-target-Tablet text {
fill: black;
}
to paint them all in black you can do something as this (consider refining it if you don't want it to apply to every chart!):
要将它们全部涂成黑色，您可以这样做（如果您不想将其应用于每个图表，请考虑对其进行改进！）：
.c3-chart-arc text {
fill: black;
}
回答by gothmogg
You can also change the colors using D3.
您还可以使用 D3 更改颜色。
for example:
例如：
d3.select(".c3-target-PC > text").style("fill",#2C9AB7);
you could also use an array of colors:
您还可以使用一系列颜色：
var colors = [['PC','#2C9AB7'],['Table','#FEBE12'],['Mobil','#DB3A1B']];
d3.select(".c3-target-"+colors[0][0]+" + " > text").style("fill",colors[0][1]);
or even use a loop...
甚至使用循环......
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]);
}
回答by Margaryta Viter
The css code below was helpful for me in such a case:
在这种情况下，下面的 css 代码对我很有帮助：
.c3-chart-arc text {
fill: black !important;
}
