如何在C3图表上动态设置饼图文字颜色
问题描述:
我有一个类似于this在线示例的C3饼图。在我的情况下,我根据传入的外部数据设置data.colors。如何在C3图表上动态设置饼图文字颜色
我的设置如下所示(我通过在颜色使用)......
this.pieChart = generate({
data: {
columns: columns,
colors: colours,
type: 'pie',
onclick: (e) => {
this.handlePieClick(e.id);
},
},
bindto: '#pie-chart',
tooltip: {
show: false
},
transition: {
duration: 1000
},
legend: {
item: {
onclick: id => {
this.handlePieClick(id);
}
}
},
});
我的应用程序没有结束这些颜色控制。当颜色较浅时,白色文字很难看清。我可能混合了浅色和深色。我需要做的是检查每种颜色,然后能够为每个饼图文本颜色设置文本为白色或黑色,但是我可以看到没有可以覆盖的回调函数来执行此操作。
有没有人知道一种方法来做到这一点?最重要的是,我无法控制进入的颜色,并且只要有颜色数据就需要在代码中设置文本颜色。
在此先感谢您的帮助!
答
使用onrendered:
选项,在C3配置
在那里,遍历的颜色,并为每个
构造一个新的颜色显示出来反对饼色
使用类定义将其应用于右段的文本(可用于颜色映射,饼图段元素类都包含数据系列的名称)
http://jsfiddle.net/shxLfss3/2/
onrendered: function() {
var colEntries = d3.entries(this.config.data_colors);
colEntries.forEach (function (colEntry) {
// get pie segment colour, make a contrasting colour from it
var hsl = d3.hsl(colEntry.value);
hsl.l = hsl.l > 0.5 ? 0 : 1; // make black if light, white if dark
var newCol = hsl.toString();
// apply that color to the segmenbt's text
var segment = d3.select(this.config.bindto+" .c3-chart-arc.c3-target-"+colEntry.key);
segment.select("text").style("fill", newCol);
}, this);
}
+0
真棒,这是它。出于某种原因,对我来说'hsl.l = hsl.l> 0.5? 0:1; '似乎从未回到黑色(但它在你的例子中)!但是,这很好,我只是将'colEntry.value'传递给我自己现有的颜色对比函数,并且完美地工作。谢谢! – peterc
可以请你创建的jsfiddle为你的代码? –
这可以通过css来实现,在你想要的例子中你想要像'.c3-chart-arc text {fill:black;}',更多的类可以在[reference]中找到(http://c3js.org/ reference.html)(底部)。您始终可以通过浏览器中的开发工具检查图表。在最糟糕的情况下,您必须按照d3直接操作图表。 – Akoya