问题：

我有两个Chart.js图表。我想用javascript附加这些图表的容器。当我这样做时，只有第二个图表得到正确的呈现。但是第一个图表没有显示。查看图表对象，我发现第一个图表有attached: false，而第二个图表有attached: true，这可能是诊断。但是我不明白为什么会发生这种情况。
当我在index.html中定义相同的容器时，问题并没有发生。为什么会发生这种情况？
谢谢你的帮助。
工作代码：https://codepen.io/docoda/pen/GRdvwqV

索引.html

<div id="container"></div>

索引.js

// First Chart

const labels = ['January', 'February', 'March', 'April', 'May', 'June']

const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
}

const config = {
  type: 'line',
  data: data,
  options: {}
}

// Add Chart-JS Container
const container = document.getElementById("container")
container.innerHTML += '<canvas id="myChart"></canvas>'

// Make Chart
const myChart1 = new Chart(
  document.getElementById('myChart'),
  config
)

// Second Chart

const config2 = {
  type: 'bar',
  data: data,
  options: {}
}

// Add Chart-JS Container
container.innerHTML += '<canvas id="myChart2"></canvas>'
const myChart2 = new Chart(
  document.getElementById('myChart2'),
  config2
)

console.log(myChart1, myChart2)

解决方案

正如LeeLenalee所说，.innerHTML +=将在不重新创建第一个画布的情况下更改DOM。您可以在创建图表之前添加容器，也可以只使用.insertAdjacentHTML("beforeend", ...)而不是.innerHTML +=。