求助：实现Gantt图中相同machine_id元素同组同线展示

问题分析 #

当前Gantt图中相同机器的任务重复显示在不同行，核心原因是未利用Google Gantt图表的任务分组机制，需要将同一machine_id的任务关联到对应的机器父任务，实现同一行展示。

解决方案步骤 #

1. 提取接口数据中唯一的机器信息，创建机器父任务
2. 将每个任务关联到对应机器的父任务ID
3. 开启Gantt图表的分组配置，让子任务显示在父任务的同一行
4. 修复代码中未定义的宽高状态bug

修改后的完整代码 #

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([]);
    // 修复未定义的宽高状态
    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);
    const containerRef = useRef(null);

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

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

    const options = {
        // 开启任务分组，让子任务显示在父任务同一行
        groupTasks: true,
        barLabelStyle: {
            fontSize: 12,
        },
    };

    // 按machine_id分组，构建父任务（机器）和子任务（作业）
    const machineGroups = {};
    data.forEach(item => {
        if (!machineGroups[item.machine_id]) {
            machineGroups[item.machine_id] = {
                id: item.machine_id.toString(),
                name: item.name_machine,
                tasks: []
            };
        }
        machineGroups[item.machine_id].tasks.push(item);
    });

    const chartDataRows = [];
    // 添加机器父任务
    Object.values(machineGroups).forEach(machine => {
        chartDataRows.push([
            machine.id,
            machine.name,
            null,
            null,
            null,
            100,
            null,
            null
        ]);
        // 添加该机器下的所有作业子任务
        machine.tasks.forEach(task => {
            chartDataRows.push([
                task.id.toString(),
                task.name, // 这里可替换为task.name_machine，显示机器名
                new Date(task.T_i),
                new Date(task.T_c),
                null,
                task.processing_times,
                null,
                machine.id // 关联到对应机器的父任务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' },
                        { type: 'string', label: 'Parent Task ID' }, // 新增父任务ID列
                    ],
                    ...chartDataRows,
                ]}
                rootProps={{ 'data-testid': '1' }}
                className='table-container'
                options={options}
            />
        </div>
    );
};

export default GanttChartForJob;

关键修改说明 #

• 新增Parent Task ID列，用于关联任务和所属机器
• 按machine_id分组数据，创建机器父任务，所有同机器的任务作为子任务关联
• 开启groupTasks: true配置，让子任务自动显示在父任务的同一行
• 修复了宽高状态未定义的bug，避免控制台报错

内容的提问来源于stack exchange，提问作者Елена М