Блог

Это должно создавать отдельные диаграммы. Однако при запуске они идентичны, а значения для индекса меняются от 0 до 1, что означает, что индекс меняется (что меня смущает, почему это произошло). Может ли кто-нибудь объяснить, что происходит. У меня складывается впечатление, что где-то я смешиваю переменные, которые я использую для ссылки на две диаграммы, в результате чего они идентичны.

 window.addEventListener(`load`, () =gt; {  Chart.defaults.plugins.tooltip.enabled = false;  let data = {  labels: (() =gt; {  let arr = [];  for(let i = 0;i lt; 31;i  ) {  arr.push((30 - i) * -2);  }  return arr;  })(),  datasets: [  {  label: `first`,  data: (() =gt; {let arr = [];for(let i = 0;i lt; 31;i  ){arr.push(Math.random())}return arr})(),  borderColor: 'rgb(75, 192, 192)',  },  {  label: `second`,  data: (() =gt; {let arr = [];for(let i = 0;i lt; 31;i  ){arr.push(Math.random())}return arr})(),  borderColor: 'rgb(75, 0, 192)',  }  ]  }  let graphs = [];  for(let i = 0;i lt; 2;i  ) {  graphs.push(new lineGraph(data, data.labels.length));  }  setInterval(() =gt; {  for(let i = 0;i lt; 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) =gt; { // data =gt; {datasetlabel: [data], ...}  this.chart.data.datasets.forEach((dataset, index) =gt; {  let newData = data[dataset.label];  if(newData) {  if(dataset.data.length gt;= maxDataSize) {  for(let i = 0;i lt; (dataset.data.length - maxDataSize)   newData.length;i  ) {  dataset.data.shift();  }  }  dataset.data.push(...newData);  }  });  this.chart.update();  }  return this; }  

В настоящее время внутри setInterval вы поочередно обновляете обе диаграммы значениями y 0 и 1 . Вместо этих значений используйте Match.random() то же, что и при инициализации диаграммы data .

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

Пожалуйста, взгляните на свой измененный код ниже и посмотрите, как он работает.

 window.addEventListener(`load`, () =gt; {  Chart.defaults.plugins.tooltip.enabled = false;  let data = {  labels: (() =gt; {  let arr = [];  for (let i = 0; i lt; 31; i  ) {  arr.push((30 - i) * -2);  }  return arr;  })(),  datasets: [{  label: `first`,  data: (() =gt; {  let arr = [];  for (let i = 0; i lt; 31; i  ) {  arr.push(Math.random())  }  return arr  })(),  borderColor: 'rgb(75, 192, 192)',  },  {  label: `second`,  data: (() =gt; {  let arr = [];  for (let i = 0; i lt; 31; i  ) {  arr.push(Math.random())  }  return arr  })(),  borderColor: 'rgb(75, 0, 192)',  }  ]  }  let graphs = [];  for (let i = 0; i lt; 2; i  ) {  graphs.push(new lineGraph(data, data.labels.length));  }  setInterval(() =gt; {  for (let i = 0; i lt; 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) =gt; {  this.chart.data.datasets.forEach((dataset, index) =gt; {  let newData = data[dataset.label];  if (newData) {  if (dataset.data.length gt;= maxDataSize) {  for (let i = 0; i lt; (dataset.data.length - maxDataSize)   newData.length; i  ) {  dataset.data.shift();  }  }  dataset.data.push(...newData);  }  });  this.chart.update();  }  return this; } 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"gt;lt;/scriptgt;