클라이언트 측 리소스에서 데이터를 로드합니다
| data | string | DataToLoad | 문자열 또는 데이터를 나타내는 객체 |
| type | string | 선택 사항, ('json', 'xml') 데이터 타입 지정. 기본값은 'json' |
gantt.parse({
data:[
{id:1, text:"Project #2", start_date:"01-04-2023", duration:18},
{id:2, text:"Task #1", start_date:"02-04-2023", duration:8,
progress:0.6, parent:1},
{id:3, text:"Task #2", start_date:"11-04-2023", duration:8,
progress:0.6, parent:1}
],
links:[
{ id:1, source:1, target:2, type:1},
{ id:2, source:2, target:3, type:0}
]
});
Gantt는 tasks 배열이 data 또는 tasks로 명명되어야 하며, 링크 배열은 links로 명명되어야 합니다.
데이터 구조는 다음과 같습니다:
gantt.parse({
data: [
{ id: 1, start_date: "2025-09-23", duration: 42,
text: "House Construction" },
{ id: 2, start_date: "2025-12-02", duration: 60,
text: "House Construction" },
],
"links": [
{ id: "1", source: "1", target: "2", type: "0" },
],
"resources": [
{ id: 1, text: "Anna, Architect", unit: "hours/day",
default_value: 8, type: "work" },
],
"assignments": [
{ task_id: "1", resource_id: "1", value: "8" },
{ task_id: "2", resource_id: "1", value: "8",
mode: "fixedDates", start_date: "2025-09-23",
end_date: "2025-09-25", duration: 4, delay: 2, },
{ task_id: "2", resource_id: "1", value: "8",
start_date: new Date("2025-09-23 00:00:00"),
end_date: new Date("2025-09-26 00:00:00"), },
]
})
data 또는 tasks 배열은 NewTask 객체들을 포함해야 하며, 이는 Task 객체와 다릅니다. NewTask는 문자열이나 빈 객체일 수 있습니다. 이 객체들은 Task 객체와 동일한 속성을 가질 수 있으며, 사용자 정의 속성도 추가할 수 있습니다. Task 객체와 달리 $로 시작하는 속성은 무시되며, 날짜는 문자열일 수 있습니다.
속성 설명:
전체 작업 속성 목록은 이 문서를 참고하세요.
gantt.parse({
data: [
{ id: 1, start_date: "2025-09-23", duration: 42,
text: "House Construction" },
]
})
links 배열은 Link 객체를 포함해야 합니다.
gantt.parse({
data: [],
links: [
{ id: "1", source: "1", target: "2", type: "0" },
]
})
resources 배열은 NewResourceItem 객체들을 포함해야 하며, 주요 속성은 다음과 같습니다:
gantt.parse({
data: [],
resources: [
{ id: 1, text: "Anna, Architect", unit: "hours/day",
default_value: 8, type: "work" },
]
})
assignments 배열은 NewAssignmentItem 객체들을 포함해야 하며, 주요 속성은 다음과 같습니다:
gantt.parse({
data: [],
assignments: [
{ task_id: "1", resource_id: "1", value: "8" },
]
})
collections 객체는 사용자 정의 데이터를 로드할 때 사용됩니다. 속성 이름은 자유롭고, 값은 컬렉션 아이템을 담은 배열입니다:
각 СollectionItem은 임의의 속성을 가진 객체입니다:
gantt.parse({
data: [
{ "id": "1", "text": "Task #1", "priority": 1,
"start_date": "02-04-2019", "duration": 1, },
{ "id": "2", "text": "Task #2", "priority": 2,
"start_date": "01-04-2019", "duration": 1, },
{ "id": "3", "text": "Task #3", "priority": 3,
"start_date": "02-04-2019", "duration": 1, },
{ "id": "4", "text": "Task #4", "priority": 1,
"start_date": "03-04-2019", "duration": 1, },
],
links: [],
collections: {
task_priority: [
{ key: 1, label: "High" },
{ key: 2, label: "Normal" },
{ key: 3, label: "Low" }
]
}
});
만약 데이터에 작업이 포함되어 있지 않다면, 빈 tasks 배열이라도 정의해야 합니다:
gantt.parse({
tasks:[],
links:[
{ id:1, source:1, target:2, type:1},
{ id:2, source:2, target:3, type:0}
]
});
v8.0부터는 parse() 메서드를 사용해 작업과 링크뿐 아니라 리소스 및 리소스 할당도 함께 로드할 수 있습니다:
gantt.parse({
tasks: [
...,
{
id: 5,
text: "Interior office",
type: "task",
start_date: "03-04-2024 00:00",
duration: 7,
parent: "2",
owner: [
{
resource_id: "6",
value: 3,
start_date: "03-04-2024 00:00",
end_date: "05-04-2024 00:00",
}
]
},
...
],
links: [],
resources: [
{id: 6, text: "John", unit: "hours/day" },
{id: 7, text: "Mike", unit: "hours/day" },
{id: 8, text: "Anna", unit: "hours/day" },
{id: 9, text: "Bill", unit: "hours/day" },
{id: 10, text: "Floe", unit: "hours/day" }
]
});
자세한 내용은 여기에서 확인할 수 있습니다.