Отображение диаграммы Gantt с данными о частичной дате в Highcharts ⇐ Javascript

[Anonymous]

Как я могу отобразить это с помощью диаграммы Hightcharts Gantt? Я рассмотрел этот пример: https://www.highcharts.com/demo/gantt/subtasks, но у меня есть только даты начала/конца для фазы 3 - не для других этапов. У меня есть следующий код, но я не уверен, лучший ли это способ отображения. Также я не уверен, почему дисплей на май 2025 года отрезан? Есть мысли? Заранее спасибо. < /P>

Код: Выделить всё

const statusColorMap = {
"Completed": "#90ee90",
"In Progress": "#f4e542",
"Not Started": "#d3d3d3"
};

Highcharts.ganttChart('container', {
title: { text: 'Project Timeline with Status' },
tooltip: {
pointFormatter: function () {
return `${this.name}[/b]
Status: ${this.status || 'N/A'}
` +
(this.milestone ? `Milestone: ${Highcharts.dateFormat('%b %e, %Y', this.start)}` :
`From: ${Highcharts.dateFormat('%b %e, %Y', this.start)} to ${Highcharts.dateFormat('%b %e, %Y', this.end)}`);
}
},
series: [{
name: 'Project',
data: [
// Parent Phases
{ id: 'phase1', name: 'Phase I: DEV' },
{ id: 'phase2', name: 'Phase II: TEST' },
{ id: 'phase3', name: 'Phase III: DEPLOY' },

// Phase I
{ name: 'ABC', parent: 'phase1', start: Date.UTC(2025, 4, 14), milestone: true, status: 'Completed', color: statusColorMap['Completed'] },
{ name: 'XYZ', parent: 'phase1', start: Date.UTC(2025, 4, 15), milestone: true, status: 'Completed', color: statusColorMap['Completed'] },
{ name: 'XXXY', parent: 'phase1', start: Date.UTC(2025, 5, 30), milestone: true, status: 'In Progress', color: statusColorMap['In Progress'] },
{ name: 'SDD', parent: 'phase1', milestone: true, status: 'Not Started', color: statusColorMap['Not Started'] },
{ name: 'DFF', parent: 'phase1', start: Date.UTC(2025, 5, 30), milestone: true, status: 'Completed', color: statusColorMap['Completed'] },
{ name: 'DSD', parent: 'phase1', start: Date.UTC(2025, 7, 1), milestone: true, status: 'Not Started', color: statusColorMap['Not Started'] },

// Phase II
{ name: 'SDEWR', parent: 'phase2', start: Date.UTC(2025, 5, 25), milestone: true, status: 'Completed', color: statusColorMap['Completed'] },
{ name: 'RERRE', parent: 'phase2', start: Date.UTC(2025, 5, 30), milestone: true, status: 'Completed', color: statusColorMap['Completed'] },
{ name: 'FDR', parent: 'phase2', start: Date.UTC(2025, 6, 30), milestone: true, status: 'In Progress', color: statusColorMap['In Progress'] },
{ name: 'DFFG', parent: 'phase2', start: Date.UTC(2025, 8, 30), milestone: true, status: 'Not Started', color: statusColorMap['Not Started'] },
{ name: 'ASSA', parent: 'phase2', start: Date.UTC(2025, 9, 1), milestone: true, status: 'Not Started', color: statusColorMap['Not Started'] },

// Phase III
{ name: 'GF', parent: 'phase3', start: Date.UTC(2025, 9, 1), end: Date.UTC(2026, 8, 30), status: 'Not Started', color: statusColorMap['Not Started'] },
{ name: 'DFTT', parent: 'phase3', start: Date.UTC(2026, 9, 1), end: Date.UTC(2027, 8, 30), status: 'Not Started', color: statusColorMap['Not Started'] },
{ name: 'SERR', parent: 'phase3', start: Date.UTC(2027, 9, 1), end: Date.UTC(2028, 8, 30), status: 'Not Started', color: statusColorMap['Not Started'] }
]
}]
});< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... highcharts