c3js中多类别图表的配置数据输入

Question

I'm doing a line / column chart form, as designed in the image below.

The first level of categorization is grouped by month-year, the next level is name.

I do not know how to configure the input data for the chart, and format X-axis tick values.

I already tried several times but still not worked.

let x = ['x', '2020-07-01', '2020-07-01', '2020-08-01', '2020-08-01', '2020-09-01', '2020-09-01'];
let data1 = ['p1', 100, 200, 300, 450, 400, 500]; // 100: p1-Peter, 200: p1-Mary.......
let data2 = ['p2', 300, 400, 450, 390, 760, 800];
let ResponsibleEmployees = ["Peter", "Mary"]

        this.chart = c3.generate({

            size: {
                width: 700
            },
            data: {
                x: 'x',
                columns: [
                    x,
                    p1,
                    p2],
                type: "bar"
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        culling: false,
                        count: 11,
                        format: function (d) {
                            let aaa = `${d.getFullYear()}-${d.getMonth() + 1}-01`;
                            
                            if (x.indexOf(aaa)) return `${d.getFullYear()}-${d.getMonth() + 1}`;
                           
                            else return ResponsibleEmployees.map(x=>x);
                        }
                    }
                }
            }
        });

Answer 1

Unfortunately c3 doesn't naturally do hierarchical axes. The best you can hope for is mimicking them though the tick formatting as you've tried. Your example would seem to work best as a category type rather than a time-series though. I can't see how to get the data underneath and in between the individual ticks though, even with dummy data points.

//let x = ['x', '2020-07-01', '2020-07-01', '2020-08-01', '2020-08-01', '2020-09-01', '2020-09-01'];
var data1 = ['p1', 100, 200, 300, 450, 400, 500]; // 100: p1-Peter, 200: p1-Mary.......
var data2 = ['p2', 300, 400, 450, 390, 760, 800];
var ResponsibleEmployees = ["Peter", "Mary"]

        var chart = c3.generate({

            size: {
                width: 700
            },
            data: {
                //x: 'x',
                columns: [
                    //x,
                    data1,
                    data2],
                type: "bar"
            },
            axis: {
                x: {
                    type: 'category',
                    categories: ['2020-07-01', '2020-07-01', '2020-08-01', '2020-08-01', '2020-09-01', '2020-09-01'],
                    tick: {
                        culling: false,
                        
                        format: function (d) {
                            var i = d % 2;
                            var val = ((i === 0) ? this.api.categories()[Math.floor(d)] + " " : "...") + ResponsibleEmployees[i];
                            return val;
                        }

                    }
                }
            }
        });

https://jsfiddle.net/7rs186fw/