使用JavaScript添加容器时Chart.js首个图表无法挂载的原因

问题描述 #

通过JavaScript为两个Chart.js图表添加容器时，仅第二个图表能正常渲染，第一个图表完全不显示。查看图表对象发现，第一个图表的attached属性为false，第二个为true。但如果直接在index.html中预先定义相同的容器，两个图表都能正常显示，请问这是什么原因？

代码示例 #

index.html

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

index.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)

解决方案 #

问题出在innerHTML +=的DOM修改逻辑上：当你执行container.innerHTML += '<canvas id="myChart2"></canvas>'时，浏览器会重新解析整个容器的HTML内容，这会销毁之前创建的myChart canvas元素，再重新生成所有元素。此时myChart1实例关联的是已经被移除的旧canvas元素，所以它的attached属性为false，无法正常渲染；而myChart2是在新元素创建后直接初始化的，关联的是当前DOM中存在的元素，因此能正常显示。

你可以通过以下两种方式解决：

方法1：先添加所有容器，再初始化图表 #

一次性把两个canvas容器添加到DOM中，再依次创建Chart实例：

const container = document.getElementById("container")
// 先添加所有容器
container.innerHTML = '<canvas id="myChart"></canvas><canvas id="myChart2"></canvas>'

// 再初始化两个图表
const myChart1 = new Chart(document.getElementById('myChart'), config)
const myChart2 = new Chart(document.getElementById('myChart2'), config2)

方法2：使用insertAdjacentHTML替代innerHTML += #

insertAdjacentHTML不会重新解析整个容器内容，而是直接在指定位置插入新HTML，不会影响已存在的DOM元素：

const container = document.getElementById("container")
// 添加第一个容器
container.insertAdjacentHTML("beforeend", '<canvas id="myChart"></canvas>')
const myChart1 = new Chart(document.getElementById('myChart'), config)

// 添加第二个容器
container.insertAdjacentHTML("beforeend", '<canvas id="myChart2"></canvas>')
const myChart2 = new Chart(document.getElementById('myChart2'), config2)

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