Estoy tratando de crear un diagrama de Gantt simple en una pestaña basada en este tutorial: https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript- -cms-33813 .

Puedo crear la línea de tiempo en las pestañas, pero offsetLeft y offsetWidth no funcionan correctamente: https://gyazo.com/2e43741d106ecd4eac21d72aa520368a .

Quería obtener el valor de offsetLeft y offsetWidth de cada elemento li, pero a veces devuelve un valor de cero.

Aquí está el código javascript:

 <script type="text/javascript"> jQuery(function($){ //create chart function function createChart_tab(e) { const years_tab = document.querySelectorAll('.research-proj-tabs .chart-years li'); const tasks_tab = document.querySelectorAll('.research-proj-tabs .chart-bars li'); const yearsArray_tab = [...years_tab]; tasks_tab.forEach(el => { //1 const duration = el.dataset.duration.split("-"); //2 const startYear = duration[0]; const endYear = duration[1]; let left = 0, width = 0; //3 if (startYear) { const filteredArray = yearsArray_tab.filter(year => year.textContent == startYear); left = filteredArray[0].offsetLeft; } // 4 if (endYear) { const filteredArray = yearsArray_tab.filter(year => year.textContent == endYear); width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth - left; } // 1 el.style.left = `${left}px`; el.style.width = `${width}px`; // 4 if (e.type == "load") { // 2 el.style.backgroundColor = el.dataset.color; // 3 el.style.opacity = 1; } }); } //window.addEventListener("onload", createChart); window.addEventListener("load", createChart_tab); window.addEventListener("resize", createChart_tab); }); </script>

Mientras que HTML y CSS siguen el mismo diseño aquí: https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813

Solo quiero averiguar qué me estoy perdiendo aquí. ¡Gracias!