將具有相同欄位值的甘特圖元素放在一行上
我買不到東西
請看一下我在下面附上的圖片 甘特圖
而且我已經擁有了顯示該圖表的所有值，甚至結果是這樣的，如第二張圖所示： 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;
你能幫我嗎？或者也許您認識一個了解這一點並可以幫助我的人？
