Estoy tratando de tener solo una etiqueta de tabla, pero hacer que js genere toda la tabla. Así que uso createElement para los encabezados, pero dentro de tbody.innerHTML, estoy concatenando una cadena de html interpolado que contiene tr, incluido el lienzo dentro de un td.
Estoy generando esto dinámicamente y dentro del ciclo for, intento representar una fila, luego tengo otra función para crear un gráfico genérico pero que se ajuste a la identificación específica del lienzo. Ej: bar_1, bar_2, ... También estoy usando getElementById para el nuevo gráfico (ctx)
Básicamente, para cada fila, quiero un gráfico en un td. El problema es que solo me muestra 1 gráfico y es para la última fila solo cuando debería aparecer para todas las filas. Lo que me hace sospechar de la selección por getElementId, pero probé la especificación de id de querySelectorAll(), querySelector(#) también, pero no tuve suerte.
----bar.js---- fragmento
let body = ``; for(var item of productList){ body+=`<tr> <td>${item.id}</td> <td>${item.name}</td> <td>${item.date}</td> <td><table>`; for(var props of item.items){ let currency = props.units==="USD"? "$":""; body+=`<tr> <td>${props.item_number}) ${currency}${props.price}</td> </tr>`; } body+=`</table></td> <td> <div style="border: 2px solid blue;"> <canvas id="bar_${item.id}"></canvas> </div> </td></tr>`; tbody.innerHTML += body; renderChart("bar_"+item.id, item.items, item.name); body=``; } ... function renderChart(id,...){ let config = ... //generic chart config new Chart(document.getElementById(id),config) }El problema es que solo me muestra 1 gráfico y es para la última fila solo cuando debería aparecer para todas las filas.
body=''; línea 23
Esta línea elimina todos los gráficos creados y buscados por la función renderChart . Es posible que desee eliminar esta línea; de lo contrario, el DOMElement al que intenta acceder se eliminará en el momento en que se acceda, o use const element = document.createElement('DIV') y agregue su elemento al cuerpo y luego pase el referencia a ese objeto para renderChart(element) para evitar la generación de ID
Descubrí que el problema era con eventos asíncronos que no sabía que estaban sucediendo. Solo el gráfico de tiempo js no le permitirá crear múltiples gráficos en el mismo lienzo o si está ocupado previamente hasta que lo destruya.
let id = "bar_"+item.id; setTimeout(()=>{renderChart(id, item.items, item.name);},100)Hice algo como esto dentro del fragmento anterior. El problema fue que la extracción de la cadena concat de id fue más lenta que getElementById, lo que hizo que getElementById obtuviera la misma. Sin embargo, todavía obtenía elementos de lienzo diferentes en las pruebas de console.log, por lo que no entiendo al 100% cómo resolver un problema resolvió el problema del nuevo gráfico real que se crea para cada lienzo único.