Problema:
Tengo dos gráficos Chart.js. Quiero adjuntar los contenedores para estos gráficos con javascript.
Cuando hago esto, solo el segundo gráfico se representa correctamente. Pero el primer gráfico no se muestra. Mirando el objeto del gráfico, descubrí que el primer gráfico tiene attached: false mientras que el segundo tiene attached: true , que podría ser el diagnóstico. Pero no entiendo por qué sucede esto.
Cuando defino los mismos contenedores en index.html , el problema no ocurre. ¿Por qué está pasando eso?
Gracias por tu ayuda.
Código de trabajo: https://codepen.io/docoda/pen/GRdvwqV
índice.html
<div id="container"></div>
índice.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)
Solución
Como dijo LeeLenalee, .innerHTML += cambiará el DOM sin recrear el primer lienzo. Puede agregar los contenedores antes de crear los gráficos o simplemente usar .insertAdjacentHTML("beforeend", ...) en lugar de .innerHTML += .
El dom se edita, por lo que el gráfico que se representa ahora obtiene un nuevo lienzo sin que estés haciendo el gráfico, esto se puede solucionar agregando primero los lienzos al dom antes de crear los gráficos:
const container = document.getElementById("container")
container.innerHTML += '<canvas id="myChart2"></canvas>'
container.innerHTML += '<canvas id="myChart"></canvas>'
const config = {
type: 'line',
data: data,
options: {}
}
// Make Chart
const myChart1 = new Chart(
document.getElementById('myChart'),
config
)
// Second Chart
const config2 = {
type: 'bar',
data: data,
options: {}
}
// Add Chart-JS Container
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
)
Debe agregar un nuevo div para cada gráfico nuevo para que funcione.
índice.html
<div id="container"></div>
// Add a new div for the 2nd chart
<div id="container2"></div>
índice.js
// ...
// Declare the var for the 2nd div container
const container2 = document.getElementById("container2")
// Add Chart-JS Container using the 2nd div
container2.innerHTML += '<canvas id="myChart2"></canvas>'
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
)
Codepen trabajando aquí https://codepen.io/SuperNoobi/pen/rNvzQQr
Debe inicializar los gráficos una vez que se carga el DOM:
...
document.addEventListener("DOMContentLoaded", () => {
// Make Chart
const myChart1 = new Chart(
document.getElementById('myChart'),
config
)
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
)
});
...
Bolígrafo: https://codepen.io/mavyfaby/pen/xxjLQQM