Question

我想知道如何创建一个甜甜圈图，其中特定切片的颜色取决于数据。我设法在条形图中使用以下方法轻松实现了这一点：

color: function (color, d) {

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

但是我找不到甜甜圈。

我的意思是

只有两个片（和两个数据组）A和B，每个只有1个值，例如A = 35和B = 65，即只有两列
B切片应始终具有恒定的颜色，例如“灰色”，无论其值如何

例如：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，因此该值为绿色）

这确实可以填充某些数据系列的静态颜色，并且如果需要的话，可以采用任何一种连续的色阶进行填充

基于C3js在Donut图表上基于数据的条件颜色

1 个答案: