CanvasJS分容器放置图表：实现按钮与对应容器的图表生成绑定

这个问题的核心是你的代码现在固定指向了第一个图表容器，没有根据点击的按钮来动态匹配对应的目标容器。下面给你两种简单有效的修改方式：

方式一：直接在点击事件中传递按钮元素 #

这种方式改动最小，适合快速修复现有代码：

修改HTML部分 #

把按钮的onclick事件改成传递当前按钮对象this：

<!-- 第一个图表容器 -->
<div class="chart-container">
  <button onclick="generateChart(this)">生成图表</button>
  <div class="chart-target"></div>
</div>
<!-- 第二个图表容器 -->
<div class="chart-container">
  <button onclick="generateChart(this)">生成图表</button>
  <div class="chart-target"></div>
</div>

修改JS部分 #

在生成图表的函数里，通过传入的按钮元素找到它所属的容器里的目标区域：

function generateChart(clickedButton) {
  // 找到当前按钮所在容器内的图表目标节点
  const targetContainer = clickedButton.parentElement.querySelector('.chart-target');
  
  // 这里替换成你实际的图表生成逻辑
  // 比如用Chart.js的话：
  new Chart(targetContainer, {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三'],
      datasets: [{ data: [12, 19, 3] }]
    }
  });
}

方式二：使用事件委托（更优雅的写法） #

如果不想在HTML里写内联事件，推荐用事件委托的方式，代码更易维护：

修改HTML部分 #

给按钮统一加一个类名，去掉内联onclick：

<div class="chart-container">
  <button class="generate-chart-btn">生成图表</button>
  <div class="chart-target"></div>
</div>
<div class="chart-container">
  <button class="generate-chart-btn">生成图表</button>
  <div class="chart-target"></div>
</div>

修改JS部分 #

给文档绑定点击事件，判断点击的是图表按钮后，再找到对应的目标容器：

document.addEventListener('click', function(e) {
  // 只处理带有指定类名的按钮
  if (!e.target.classList.contains('generate-chart-btn')) return;
  
  const clickedButton = e.target;
  // 找到当前按钮所在容器内的图表目标节点
  const targetContainer = clickedButton.parentElement.querySelector('.chart-target');
  
  // 图表生成逻辑，同样替换成你自己的代码
  new Chart(targetContainer, {
    type: 'bar',
    data: {
      labels: ['苹果', '香蕉', '橙子'],
      datasets: [{ data: [5, 8, 3] }]
    }
  });
});

为什么原来的代码会失效？ #

原来的代码应该是用了类似document.querySelector('.chart-target')这样的选择器，它只会返回页面中第一个匹配到的元素，所以不管点哪个按钮，图表都会跑到第一个容器里。上面的两种方法都是通过点击的按钮，动态定位到它所属的容器内的目标节点，这样就能实现按钮和容器的一一对应了。

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