使用Chart.js在HTML/JS中循环生成柱状图失败问题排查

你的问题确实和仅使用一个canvas元素直接相关。

每次循环中，你都在同一个id="myChart"的canvas上创建新的Chart实例，Chart.js会自动替换该canvas上已有的图表内容，最终循环结束后，只有最后一次创建的图表会被保留（你看到第一个可能是渲染时序的偶发情况，但核心逻辑是复用canvas导致了覆盖）。

要实现为每一组itemData生成独立的柱状图，需要为每个图表分配一个独立的canvas元素，下面是修改后的完整代码：

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.2/chart.umd.min.js" integrity="sha512-ziISJqd7FOx3QNvnXiFWAfgSKqte9jMjzhrCnc7Gxpxfxjb5FdrBFg673DloeFEH6VLmTeo86yu5y/xJm38cBg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<div class="container">
  <br>
  <p><a href="/" class="btn btn-secondary btn">Back to Charts & Analysis</a></p>

  <h4>Feature-wise Analysis</h4>
  <hr>
</div>

<!-- 改为一个容器，用来动态生成多个canvas -->
<div id="charts-container" style="padding-left: 100px;">
</div>

修改后的JavaScript代码 #

let labels = ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'];

let itemData = [
  [12, 13, 14, 15, 16, 17],
  [19, 20, 21, 22, 23, 24],
  [3, 4, 5, 6, 7, 8],
  [5, 6, 7, 8, 9, 10],
  [10, 11, 12, 13.14, 15],
  [27, 28, 29, 30, 31, 32]
];

let text = ['t1', 't2', 't3', 't4', 't5', 't6'];

const container = document.getElementById('charts-container');

for (let i = 0; i < itemData.length; i++) {
  // 动态创建每个图表对应的canvas元素
  const canvas = document.createElement('canvas');
  // 设置canvas的尺寸，避免图表挤在一起
  canvas.style.width = '600px';
  canvas.style.height = '500px';
  canvas.style.marginBottom = '20px';
  container.appendChild(canvas);

  const data = {
    labels: labels,
    datasets: [{
      data: itemData[i],
      backgroundColor: 'green'
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
      plugins: {
        legend: {
          display: false
        },
        title: {
          display: true,
          text: text[i]
        }
      }
    }
  };

  // 基于新创建的canvas生成图表
  const chart = new Chart(canvas, config);
}

额外说明 #

• 动态创建canvas时，通过设置style属性给每个图表添加间距和固定尺寸，避免布局混乱
• 如果你需要给每个canvas设置唯一id，也可以在创建时添加canvas.id = chart-${i}``，方便后续操作
• 如果你原本的需求是在同一个canvas上切换不同图表，那需要在每次创建新实例前销毁旧实例：chart?.destroy()，但显然你的需求是生成多个独立图表，所以第一种方案更合适

内容的提问来源于stack exchange，提问作者Kiran