Chart.js es una biblioteca popular para hacer gráficos, y puede hacer todo tipo de gráficos, pero no puede hacer un diagrama de Gantt/línea de tiempo. Estoy tratando de piratear chart.js 3, pero la documentación no es excelente y me siento realmente frustrado. ¿Cómo se hace una línea de tiempo de diagrama de Gantt con chart.js 3?
Lo haces así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Timeline chart.js 3</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> </head> <body> <main> <canvas id="gantt-chart"></canvas> <script> data = [ {id: 2, name: "Season Apples", start_date: "2022-03-07 15:00:00.000", end_date: "2022-03-10 15:00:00.000"}, {id: 1, name: "Cut Apples", start_date: "2022-03-05 15:00:00.000", end_date: "2022-03-07 15:00:00.000"}, {id: 3, name: "Bake Apples", start_date: "2022-03-11 15:00:00.000", end_date: "2022-03-15 15:00:00.000"} ] // sort objects by start_date data.sort(function (a, b) { return new Date(a.start_date) - new Date(b.start_date); }); // chart js needs labels in separate array const labels = data.map(x => { return [x.name]; }) // transform the data from how the backend outputs it to how the chart js needs it const newData = data.map(x => { return [x.start_date.split(' ')[0], x.end_date.split(' ')[0]] }); data = { labels: labels, datasets: [{ label: 'Make Apple Recipe', data: newData, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, fill: false, barPercentage: 0.3 }] }; options = { indexAxis: 'y', responsive: true, scales: { x: { min: newData[0][0], type: 'time', time: { unit: 'day' } }, y: { beginAtZero: true, } } }; new Chart(document.getElementById('gantt-chart').getContext('2d'), { type: 'bar', data: data, options: options }); </script> </main> </body> </html>