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

Question

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

color: function (color, d) {

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

但我想不出甜甜圈。

我的意思是：

只有两个切片（和两个数据组）A和B，每个切片只有1个值，例如A = 35 和 B = 65，即只有两列
B 切片应始终具有恒定的颜色，例如"gray" 不管它的值如何
切片及其颜色应取决于 A 值，例如如果值 > 50，则颜色为红色，如果值 > 75，则颜色为橙色，依此类推。

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

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

Answer 1

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

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

基本上调用 color 有两个参数，第一个总是现有的颜色，第二个可以是数据的 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 圆环图数据的条件颜色

Conditional colors based on data on Donut chart with C3js

donut-chart

c3.js