我可以使用C3.js制作一个堆叠的条形图，它为不同的列提供不同的数据值吗？

Question

I am attempting to make a bar chart with two columns, each of which is split into two different sections. The data in the second column is different from the data in the first column. This has proven to be a problem in C3.js for me. The way to generate columns is by passing a "columns" array into the data value for the chart. The columns array is actually an array of arrays like this:

columns: [
    ['data1', 50, 100],
    ['data2', 20, 30],
    ['data3', 30, 60],
    ['data4', 20, 20]
]

where each array represents a data value. The first value in the array is the name of the data value, and the following values are the amount of space that data value will occupy in the corresponding column on the bar chart. So, for example, the data1 value will be 50 units high in column 1 and 100 units high in column 2.

The problem is that I want to show data1 and data2 in column 1, but not at all in column 2. And I want to show data3 and data4 in column 2, but not at all in column 1. I tried passing null values instead of integers for the columns values in the arrays for the data I do not want to show, but C3.js still leaves space in the chart as if the values were there and just equal to zero.

Does anyone know if it's possible to do this in C3.js?

Answer 1

Based on what I understand of reading your problem, if I've misinterpreted it let me know:

If you use the groups configuration - http://c3js.org/reference.html#data-groups -, then x-axis space is only reserved per group rather than per data series. So if you then put data series 1 and 3 and data series 2 and 4 in the same groups and null the values you don't want to see, you won't get the 'empty' space issue

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 50, null],
            ['data2', 20, null],
            ['data3', null, 60],
            ['data4', null, 20]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data3'],
            ['data2', 'data4']
        ]
    },
});

http://jsfiddle.net/j7jw4suo/1/