我买不到东西

请看一下我在下面附上的图片 甘特图

而且我已经拥有了显示该图表的所有值，甚至结果是这样的，如第二张图所示： My甘特图

但是，这并不是我想要得到的。

这就是我的意思：看第二张图片，您会看到名称机器 1、机器 2 等等。因此，它们是重复的，但我需要将具有相同 machine_id 的值分组并显示在图中的同一行上。最初，不知道有多少这样的机器，也不知道每个这样的组中有多少个元素 -> 所有这些数据都是后来从 axios 获得的，代码如下：

import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import '../App.css'
import { Chart } from "react-google-charts";


const GanttChartForJob = () => {
    const [data, setData] = useState([]);

    // useEffect(() => {
    //     axios.get('http://127.0.0.1:8000/result/')
    //         .then(response => {
    //             setData(response.data);
    //         })
    //         .catch(error => {
    //             console.error(error);
    //         });
    // }, []);
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'http://127.0.0.1:8000/result/',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    useEffect(() => {
        const handleResize = () => {
            setWidth(containerRef.current.offsetWidth);
            setHeight(containerRef.current.offsetHeight);
        };
        window.addEventListener('resize', handleResize);
        handleResize();
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    const containerRef = useRef(null);

    const options = {

    };

    const transformedData = data.map(item => ({
        id: item.id,
        name: item.name_machine,
        start: item.T_i,
        end: item.T_c,
        progress: item.processing_times,
        bar: { group: item.machine_id }
    }));

    return (
        <div ref={containerRef} className='container'>
            <Chart
                width={'100%'}
                height={'1000px'}
                chartType="Gantt"
                loader={<div>Loading Chart</div>}
                data={[
                    [
                        { type: 'string', label: 'Task ID' },
                        { type: 'string', label: 'Task Name' },
                        { type: 'date', label: 'Start Date' },
                        { type: 'date', label: 'End Date' },
                        { type: 'number', label: 'Duration' },
                        { type: 'number', label: 'Percent Complete' },
                        { type: 'string', label: 'Dependencies' },
                    ],
                    ...transformedData.map(item => [
                        item.id.toString(),
                        item.name,
                        new Date(item.start),
                        new Date(item.end),
                        null,
                        item.progress,
                        null,
                    ]),
                ]}
                rootProps={{ 'data-testid': '1' }}
                className='table-container'
            >
                <table className='table'></table>
            </Chart>
        </div>
    );
};

export default GanttChartForJob;

你能帮我吗？或者也许您认识一个了解这一点并可以帮助我的人？​​