Platzieren Sie Gantt-Diagrammelemente mit demselben Feldwert in einer Zeile
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?
