c3.js从JSON有效负载生成堆积的条形图

问题描述：

当我使用JSON有效负载（下面的代码）时，我正在尝试使用c3生成堆积的条形图。但是，当我对数据进行分组时，它们没有重叠行为，而是重叠了。如果我使用列结构，则会得到预期的行为，但这意味着与其他视觉效果（即时间序列图）相比，对于堆叠式条形图生成的代码将有所不同。

I am attempting to generate a stacked bar chart with c3 when using a JSON payload (code below). However, when I group the data, instead of having a stacking behavior, they overlay instead. If I use the column structure, I get the intended behavior, but this means that I'd have different code generate for a stacked bar chart versus my other visuals (ie timeseries chart).

var chart = c3.generate({
data: {
    x: "x-axis",
    json:[
        { "x-axis": "0",
            "data1": 30
        },
        { "x-axis": "0",
            "data2": 40
        }],
        keys: {
            x: "x-axis",
            value: ["data1", "data2"]
        },
                groups: [
        ['data1', 'data2']
    ],
    type: 'bar'
}
});

这里是一个小提琴： http://jsfiddle.net/cjrobinson/ozf4fzcb/

答

奇怪的是，它们在示例中相互过度绘制，我报告说这是c3的错误

It's weird they overplot each other in your example, I'd report that as a bug to c3

如果您不想使用column []格式，则可以做到如下所示，尽管如此，仍然需要处理一些数据：

If you don't want to use the columns[] format, you could do it like below, would still need some data wrangling though:

var chart = c3.generate({
data: {
    x: "x-axis",
    json:[
        { "x-axis": "0",
            "data1": 30,
            "data2": 40
        },
        { "x-axis": "1",
            "data1" :20,
            "data2": 60
        }],
       // etc etc
        keys: {
            x: "x-axis",
            value: ["data1", "data2"]
        },
                groups: [
        ['data1', 'data2']
    ],
    type: 'bar'
}
});

http://jsfiddle.net/dhgujwy7/1/

c3.js从JSON有效负载生成堆积的条形图

相关推荐