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; }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>