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

Question

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

color: function (color, d) {

if (d.value < 25) {
 return "#f00";
}

但我不知道甜甜圈。

我的意思：

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

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

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

例如：A 是 45，B 是 55。切片是红色的。 B 是灰色的。输入数据更改（即图表被刷新）。 A 现在是 60，B 是 40。B 仍然是灰色的（一直都是），但 A 现在应该是橙色的。输入数据变化。 A 是 90，B 是 10。B 是灰色。 A 是绿色的，以此类推。

非常感谢您的帮助！ \o/

Answer 1

我认为这很简单，但我无法在颜色函数中获取图表对象的句柄，并且“this”始终是 Window 对象或未定义。

这是我所做的，它涉及使用外部变量作为缓存：

基本上 color 使用 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，因此该值将是绿色）

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