Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

405
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!