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

我正在做一个折线图/柱形图，如下图所示

第一级分类是按月份和年份分组的，下一级是名称

我不知道如何配置图表的输入数据，以及如何设置X轴刻度值的格式

我已经试过好几次了，但仍然没有成功

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);
                        }
                    }
                }
            }
        });

---

不幸的是，c3不能自然地执行层次轴。你所能期望的最好方法就是通过你尝试过的勾号格式来模仿它们。不过，您的示例作为类别类型而不是时间序列似乎效果最好。但是，我看不出如何在各个刻度下和刻度之间获取数据，即使是使用虚拟数据点

//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;
                        }

                    }
                }
            }
        });