Platzieren Sie Gantt-Diagrammelemente mit demselben Feldwert in einer Zeile

Question

Ich kann nichts kaufen

Bitte schauen Sie sich das Bild an, das ich unten angehängt habe Gantt-Diagramm

Und ich habe bereits alle Werte, um dieses Diagramm anzuzeigen, sogar das Ergebnis sieht so aus, wie im zweiten Bild gezeigt: MyGantt-Diagramm

Das ist jedoch nicht das, was ich bekommen möchte.

Das meine ich: Schauen Sie sich das zweite Bild an und Sie werden die Namen Maschine 1, Maschine 2 usw. sehen. Es handelt sich also um Duplikate, aber ich muss die Werte mit derselben Maschinen-ID gruppieren und in derselben Zeile im Diagramm anzeigen. Anfangs war nicht bekannt, wie viele solcher Maschinen es gab und wie viele Elemente es in jeder dieser Gruppen gab –> Alle diese Daten wurden später von axios mit dem folgenden Code abgerufen:

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;

Kannst du mir helfen? Oder kennen Sie vielleicht jemanden, der das weiß und mir helfen kann? ​​

Answer 1

您可以尝试Timeline图表。

代码沙箱：https://codesandbox.io/s/ agitated-kowalevski-i3mlj6?file=/App.tsx