javascript - 在C3.js上，使用JSON数据，如何更改每个单独条的颜色？

Question

我有一个包含一些 JSON 数据的条形图:

var chart = c3.generate({
data: {
    type: 'bar',
    json: [
        { 'indicator': 'X', 'total': 500 },
        { 'indicator': 'Y', 'total': 600 },
        { 'indicator': 'Z', 'total': 700 }
    ],
    keys: {
        x: 'indicator',
        value: ['total']
    }
},
axis: {
        x: {
            type: 'category'
        }
},
bar: {
    width: {
        ratio: 0.5
    }
},
color: {
    pattern: ['#E39920', '#53B5B5', '#CD249A']
  },
});

http://jsfiddle.net/fu33b6em/

如何更改每个条形的颜色？我使用了 C3 的颜色图案解决方案，但这使得所有条形都与图案的第一种颜色相同。

Answer 1

您使用的颜色函数变体按系列对条形进行着色，并且由于条形中的所有数据都在“总计”系列中，因此它们都将具有相同的颜色。

有 2 个选项:

首先，您可以做的是在数据声明中声明一个颜色函数，并使用 .index 来设置每个条的颜色 - 请参阅 http://jsfiddle.net/fu33b6em/1/完整的 fiddle

    color: function (color, d) {
        if (d.id) {
            return ['#E39920', '#53B5B5', '#CD249A'][d.index % 3];
        }
        return "#000";
    },

但是，您会注意到底部的系列键不反射(reflect)这些颜色，它返回系列“total”的默认颜色，这里是黑色，即代码中的“#000”。

您的第二种选择是为每个条目声明一个单独的系列，即totalX、totalY、totalZ并保留原始颜色函数 - http://jsfiddle.net/fu33b6em/2/

 data: {
    type: 'bar',
    json: [
        { 'indicator': 'X', 'totalX': 100 },
        { 'indicator': 'Y', 'totalY': 200 },
        { 'indicator': 'Z', 'totalZ': 300 }
    ],
    groups: [
        ["totalX", "totalY", "totalZ"],
    ],
    keys: {
        x: 'indicator',
        value: ['totalX', 'totalY', 'totalZ'],
    },
},

groups 声明是为了避免图表中出现间隙。即 X 缺少totalY 和totalZ 的数据，但c3 将为它们保留条形空间。但是，告诉 c3 它们是分组(堆叠)系列，并且将仅保留一个条形的空间(在这种情况下，totalY 和 TotalZ 将是与 TotalX 位于同一列中的零高度堆叠条形)