Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

403
Vistas
Chart.js no actualiza varios gráficos de forma independiente

Se supone que esto crea gráficos separados. Sin embargo, cuando se ejecutan, son idénticos y los valores se alternan entre 0 y 1 para el índice, lo que implica que el índice está cambiando (lo que me confunde, no sé por qué sucedería esto). ¿Alguien puede explicar qué está pasando? Tengo la impresión de que en algún lugar estoy mezclando las variables que uso para hacer referencia a los dos gráficos, lo que hace que sean idénticos.

 window.addEventListener(`load`, () => { Chart.defaults.plugins.tooltip.enabled = false; let data = { labels: (() => { let arr = []; for(let i = 0;i < 31;i++) { arr.push((30 - i) * -2); } return arr; })(), datasets: [ { label: `first`, data: (() => {let arr = [];for(let i = 0;i < 31;i++){arr.push(Math.random())}return arr})(), borderColor: 'rgb(75, 192, 192)', }, { label: `second`, data: (() => {let arr = [];for(let i = 0;i < 31;i++){arr.push(Math.random())}return arr})(), borderColor: 'rgb(75, 0, 192)', } ] } let graphs = []; for(let i = 0;i < 2;i++) { graphs.push(new lineGraph(data, data.labels.length)); } setInterval(() => { for(let i = 0;i < graphs.length;i++) { graphs[i].updateData({first: [i], second: [i]}) } }, 1000) }) function lineGraph(data, maxDataSize) { let div = document.createElement(`div`); div.classList.add(`module`, `module-line`); let canvas = document.createElement(`canvas`); canvas.classList.add(`canvas-line`); canvas.width = 200; canvas.height = 200; div.appendChild(canvas); this.div = document.body.appendChild(div); this.canvas = this.div.getElementsByClassName(`canvas-line`).item(0); this.ctx = this.canvas.getContext(`2d`); this.chart = new Chart(this.ctx, { type: `line`, data: data, }) this.updateData = (data) => { // data => {datasetlabel: [data], ...} this.chart.data.datasets.forEach((dataset, index) => { let newData = data[dataset.label]; if(newData) { if(dataset.data.length >= maxDataSize) { for(let i = 0;i < (dataset.data.length - maxDataSize) + newData.length;i++) { dataset.data.shift(); } } dataset.data.push(...newData); } }); this.chart.update(); } return this; }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Actualmente, dentro de setInterval , actualiza alternativamente ambos gráficos con valores y 0 y 1 . En lugar de estos valores, use Match.random() , igual que cuando inicializa los data del gráfico.

 setInterval(() => { for (let i = 0; i < graphs.length; i++) { graphs[i].updateData({ first: [Math.random()], second: [Math.random()] }) } }, 1000)

Eche un vistazo a su código modificado a continuación y vea cómo funciona.

 window.addEventListener(`load`, () => { Chart.defaults.plugins.tooltip.enabled = false; let data = { labels: (() => { let arr = []; for (let i = 0; i < 31; i++) { arr.push((30 - i) * -2); } return arr; })(), datasets: [{ label: `first`, data: (() => { let arr = []; for (let i = 0; i < 31; i++) { arr.push(Math.random()) } return arr })(), borderColor: 'rgb(75, 192, 192)', }, { label: `second`, data: (() => { let arr = []; for (let i = 0; i < 31; i++) { arr.push(Math.random()) } return arr })(), borderColor: 'rgb(75, 0, 192)', } ] } let graphs = []; for (let i = 0; i < 2; i++) { graphs.push(new lineGraph(data, data.labels.length)); } setInterval(() => { for (let i = 0; i < graphs.length; i++) { graphs[i].updateData({ first: [Math.random()], second: [Math.random()] }) } }, 1000) }) function lineGraph(data, maxDataSize) { let div = document.createElement(`div`); div.classList.add(`module`, `module-line`); let canvas = document.createElement(`canvas`); canvas.classList.add(`canvas-line`); canvas.width = 200; canvas.height = 40; div.appendChild(canvas); this.div = document.body.appendChild(div); this.canvas = this.div.getElementsByClassName(`canvas-line`).item(0); this.ctx = this.canvas.getContext(`2d`); this.chart = new Chart(this.ctx, { type: `line`, data: data, }) this.updateData = (data) => { this.chart.data.datasets.forEach((dataset, index) => { let newData = data[dataset.label]; if (newData) { if (dataset.data.length >= maxDataSize) { for (let i = 0; i < (dataset.data.length - maxDataSize) + newData.length; i++) { dataset.data.shift(); } } dataset.data.push(...newData); } }); this.chart.update(); } return this; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda