通过chart-js的循环生成多个图表

Question

我试图只使用table标记，但让js生成整个表。因此，我使用createElement作为标题，但在tbody.innerHTML中，我使用字符串连接字符串内插的html，该html包含td内的tr(包括画布(。

我正在动态生成这个，在for循环中，我尝试渲染一行，然后使用另一个函数创建通用图表，但适合画布的特定id。例如：bar_1，bar_2。。。我还在为新的Chart(ctx(使用getElementById

所以基本上，对于每一行，我都想要一个td中的图表。问题是，它只显示给我一个图表，只有当它应该显示所有行时，它才显示给最后一行。这让我怀疑getElementId的选择，但我尝试了querySelectorAll((id规范，querySelector(#(也尝试了，但没有成功。

----bar.js-片段

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)
}

Answer 1

问题是，它只向我显示1个图表，并且只有当它应该显示在所有行时，它才显示在最后一行。

body='';第23行

此行删除renderChart函数创建和搜索的所有图表。您可能想要删除此行，否则您试图访问的DOMElement将在访问时被删除，或者使用const element = document.createElement('DIV')并将元素附加到主体，然后将对该对象的引用传递给renderChart(element)以避免ID生成

Answer 2

我发现问题出在我不知道正在发生的异步事件上。只有时间图表js不会让你在同一个画布上创建多个图表，或者如果它以前被占用，直到你销毁它。

let id = "bar_"+item.id;
setTimeout(()=>{renderChart(id, item.items, item.name);},100)

我在上面的片段中做了类似的事情。问题是提取id的字符串连接比getElementById慢，这使得getElementById得到相同的连接。然而，我在console.log测试中仍然得到了不同的画布元素，所以我不100%理解解决一个问题是如何解决为每个唯一画布创建实际新图表的问题的。