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

你想要这样的东西吗？ - ＆GT;

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

如果是这样，则需要根据示例重命名data1和data2字段。如果没有，绘制/扫描你期望的图片/草图 - c3中的组是每个堆栈中涉及的数据元素，但我对你的月份和组的使用进行了正确或错误的解释＃39;作为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']
        }
    }
});

试图创建一个分组和堆叠的条形图，但遇到一些麻烦

1 个答案: