Letakkan elemen carta Gantt dengan nilai medan yang sama pada satu baris

Question

Saya tidak boleh membeli apa-apa

Sila lihat gambar yang saya lampirkan di bawah Carta Gantt

Dan saya sudah mempunyai semua nilai untuk memaparkan carta ini, malah hasilnya seperti ini, seperti yang ditunjukkan dalam gambar kedua: carta MyGantt

Namun, ini bukan yang saya mahu dapatkan.

Ini yang saya maksudkan: lihat gambar kedua dan anda akan melihat nama mesin 1, mesin 2 dll. Jadi, mereka adalah pendua, tetapi saya memerlukan nilai dengan machine_id yang sama untuk dikumpulkan dan dipaparkan pada baris yang sama dalam graf. Pada mulanya, tidak diketahui berapa banyak mesin sedemikian, mahupun berapa banyak elemen yang terdapat dalam setiap kumpulan tersebut -> Semua data ini kemudiannya diperoleh daripada axios dengan kod berikut:

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;

Bolehkah anda membantu saya? Atau mungkin anda mengenali seseorang yang mengetahui perkara ini dan boleh membantu saya?

Answer 1

Anda boleh mencuba TimelineCarta.

Kod Sandbox: https://codesandbox.io/s/ agitated-kowalevski-i3mlj6?file=/App.tsx