条件颜色基于 C3js 圆环图上的数据

Question

我想知道如何创建一个圆环图，其中特定切片的颜色取决于数据。我设法在条形图中相当容易地实现了这一点，使用：

color: function (color, d) {
if (d.value < 25) {
return "#f00";
}

但我无法弄清楚甜甜圈。

我的意思是：

• 只有两个切片(和两个数据组(，A 和 B，每个只有 1 个值，例如 A = 35 和 B = 65，即只有两列

• B切片应始终具有恒定的颜色，例如"灰色"，无论其值如何

• 切片及其颜色应取决于 A 值，例如，如果值> 50，则颜色为红色，如果值> 75，则颜色为橙色，依此类推。

例如：A 为 45，B 为 55。切片是红色的。B 为灰色。输入数据更改(即图表刷新(。A 现在是 60，B 现在是 40。B 仍然是灰色的(它总是(，但 A 现在应该是橙色的。输入数据更改。A 是 90，B 是 10。B 为灰色。A 为绿色，依此类推。

非常感谢任何帮助！ \o/

Answer 1

我认为这很简单，但我无法在颜色函数中处理图表对象，并且"this"始终是 Window 对象或未定义。

这是我管理的内容，它涉及使用外部变量作为缓存：

基本上，颜色是用 2 个参数调用的，第一个参数始终是现有颜色，第二个参数可以是数据的 id，也可以是更大的数据对象，包括该甜甜圈扇区的值。我使用第二种情况向缓存填充一个值，该值在遇到第一种情况时使用。

var temp = {};
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
color: function (color, d) {
console.log (arguments, this, chart);
if (d.values) {
var id = d.id;
var newColour = d.values[0].value > 40 ? "red" : "blue";
temp[id] = newColour;
}
return temp[d] || color;
},
type : 'donut',
},
donut: {
title: "Iris Petal Width"
}
});

将其复制到 https://c3js.org/samples/chart_donut.html 以查看其运行情况

---

答案 2

实际上，另一种(未记录的(方法是这样的：

color: {
pattern: ['red', 'green', 'blue', 'orange', 'turquoise'], // colors for values
threshold: {
values: [30, 60, 90, 100, 150]
}
}

扇区在图案数组中取颜色，在它小于第一个阈值的索引处(例如，59小于60，因此该值将为绿色(

不过，这确实会填充某些数据系列的静态颜色，以及任何进行连续色标的方法(如果您想要的话(。