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

您正在使用的颜色函数变量按系列颜色显示条形图，并且由于您所拥有的条形图中的所有数据都在系列“总计”中，因此它们将具有相同的颜色。

有两个选项：

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

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

但是，您会注意到底部的系列键不会反映这些颜色，它会返回系列'total'的默认颜色，这里是黑色，代码中的“＃000”。 / p>

您的第二种选择是每个条目声明一个单独的系列，即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在同一列中的零高度堆叠条形图）

Answer 2

您需要为数组中的每个条形定义颜色，并使用 color 函数返回每个条形所需的颜色，

var cat_colors = ['#FF0000','#00FF00', '#0000FF']

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50],
        ],
        type: 'bar',
        color: function (color, d) {
            return cat_colors[d.x];

        }
    }
})

;

https://jsfiddle.net/okhsu1nv/

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

2 个答案: