c3.js - 基于 C3js donut chart 数据的条件颜色

Question

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

color: function (color, d) {

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

但我无法弄清楚 donut 。

我的意思是:

只有两个切片(和两个数据组)，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 对象或未定义。

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

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

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，因此该值将为绿色)

不过，这确实会为某些数据系列添加静态颜色，并且如果您需要，可以使用任何方式进行连续色标