尝试创建分组和堆叠的条形图但遇到了一些问题

Question

我正在尝试创建一个分组和堆叠的条形图，但在理解如何使用 c3js 执行此操作时遇到了一些困难。这个教程很棒，向我展示了一个很好的分组图表。

http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/

我正在寻找类似的东西，但要让每个柱状图堆叠 2 个数据集。我的数据如下：

columns: [
  ['x', 'data1', 'data2'],
  ['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
  ['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
  ['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
]

我希望图表包含 1 月、2 月、3 月的组。然后在每个组中标记 3 个堆积条。任何想法，如果这是可能的，它怎么可能，如果有的话。

谢谢！

Answer 1

你想要这样的东西吗？ -->

http://jsfiddle.net/3r39gknt/1/

如果是这样，则需要根据示例重命名 data1 和 data2 字段。如果不是，draw/scan picture/sketch 你所期望的 - c3 中的组是每个堆栈中涉及的数据元素，但我已经正确或错误地解释了你对月的使用 'groups'作为 x 轴上的不同点。

var chart = c3.generate({
    data: {
        columns: [ // randomish data
            ['data1', 30, 200, 200],
            ['data2', 130, 100, 100],
            ['data3', 230, 220, 200],
            ['data4', 230, 220, 200],
            ['data5', 230, 200, 210],
            ['data6', 230, 190, 200]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2'],
            ['data3', 'data4'],
            ['data5', 'data6'],
        ],
        order: null,
        colors: {
            data1: '#f00',
            data2: '#00f',
            data3: '#f33',
            data4: '#33f',            
            data5: '#f66',
            data6: '#66f'
        }
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
    },
    axis: {
        x: {
            type: 'category',
            categories: ['january', 'february', 'march']
        }
    }
});

尝试创建分组和堆叠的条形图但遇到了一些问题

Trying to create a grouped and stacked bar chart but having some trouble

c3.js