柱状图问题 #5712

想实现柱状图分组功能 像这样的

我现在的效果是这样的 这怎么成这样了

代码 var chart = new G2.Chart({ container: 'g2-ri', autoFit: true, // paddingTop: 0, // paddingBottom: 10, // paddingRight: 10 });

            chart
                .interval()
                .data({
                    type: 'inline',
                    value: this.zhuData.RiProfit,
                    transform: [
                        {
                            type: 'fold',
                            fields: ['date_times', 'ps_sale_total_price', 'cost_money', 'lirun_price'],
                            // key: 'key',
                            // value: 'value',
                        },
                    ],
                })
                .transform({ type: 'sortX', by: 'y', reverse: true, slice: 6 })
                .transform({ type: 'dodgeX' })
                .encode('x', 'date_times')
                .encode('y', 'ps_sale_total_price')
                .encode('color', 'ps_sale_total_price')
                .scale('y', { nice: true })
                .axis('y', { labelFormatter: '~s' });

            chart
                .interaction('tooltip', { shared: true })
                .interaction('elementHighlightByColor', { background: true });

            chart.render();

数据是 [ { "date_times": "2023-10-01", "ps_sale_total_price": 0, "cost_money": 0, "lirun_price": 0 }, { "date_times": "2023-10-02", "ps_sale_total_price": 0, "cost_money": 0, "lirun_price": 0 }, { "date_times": "2023-10-03", "ps_sale_total_price": 0, "cost_money": 0, "lirun_price": 0 }, { "date_times": "2023-10-04", "ps_sale_total_price": 0, "cost_money": 0, "lirun_price": 0 } ]

需要把每个日期下面 ps_sale_total_price cost_money lirun_price 这三个字段分为一组 搞不定了啊 帮帮忙感谢了