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

时间:2016-06-06 16:33:18

标签: json c3.js stackedbarseries

我在尝试使用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/

1 个答案:

答案 0 :(得分: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/