c3.js 从 JSON 有效负载生成堆积条答案

【问题标题】：c3.js generate a stacked bar from JSON payloadc3.js 从 JSON 有效负载生成堆积条
【发布时间】：2016-06-06 16:33:17
【问题描述】：

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

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/

【问题讨论】：

标签： json c3.js stackedbarseries

【解决方案1】：

在您的示例中它们相互重叠很奇怪，我会将其作为错误报告给 c3

如果你不想使用 columns[] 格式，你可以像下面那样做，但仍然需要一些数据整理：

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/

【讨论】：