通过图表js循环生成多个图表

Question

我试图只有 table 标签，但让 js 生成整个 table。因此，我将 createElement 用于 headers，但在 tbody.innerHTML 内，我是字符串连接字符串插值 html，其中包含 tr，包括 td 内的 canvas。

我正在动态生成它并在 for 循环中，我尝试渲染一行，然后使用另一个函数来创建通用图表但适合 canvas 的特定 ID。例如：bar_1、bar_2、...我也在为新图表 (ctx)

使用 getElementById

所以基本上对于每一行，我想要一个 td 格式的图表。问题是，它只显示了 1 个图表，并且只有在它应该显示所有行时才显示最后一行。这让我怀疑 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

The issue is, it only shows me 1 chart and it is for the last row only when it should show up for all rows.

body=''; 第 23 行

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

Answer 2

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

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

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

通过图表js循环生成多个图表

generate multiple charts via loop for chart js

javascript

for-loop

chart.js

chartjs-2.6.0