在for（）循环

Question

我尝试使用Smoothie.js制作一些CPU使用率图表（类似于server load example）。

我创建了一个for()循环，为每个核心创建了一个TimeSeries和一个SmoothieChart元素，然后是一个小的更新程序函数来添加最新的加载数据（在下面的代码段中替换为每个系列的随机（）函数。

但是，只有最后一个图表显示正确，其他图表留空。通过检查员快速浏览后发现，所有系列和图表都已创建并绑定，但前三个系列的append功能无效（即使通过控制台手动添加数据也无法正常工作，系列的内部data数组未更新。

我不明白为什么基于函数的example有效，但我的基于循环的却没有。我的代码中有什么问题吗？这是Smoothie中的一个错误吗？

请参阅以下代码段：

＆＃13;

＆＃13;

const container = document.getElementById("charts_container");
const data = {
  cores: 4
}; // Retrieved through an NPM library
const cpus = [1, 2, 3, 4];


var series = [];
var charts = [];

// For each core...
for (var i = 0; i < data.cores; i++) {
  // Create some DOM
  container.innerHTML += `<div>
      <h1>CORE <em>#<span>${i}</span></em></h1>
      <canvas id="cpu_canvas_${i}" height="60"></canvas>
      </div>`;

  // Create a new TimeSeries
  series.push(new TimeSeries());

  // Create a new chart
  let serie = series[i];
  let chart = new SmoothieChart();

  chart.addTimeSeries(serie);
  chart.streamTo(document.getElementById(`cpu_canvas_${i}`), 500);

  charts.push(chart);
}

// Initialize the series updater
updateInfo();
var infoUpdater = setInterval(() => {
  updateInfo();
}, 500);


function updateInfo() {
  cpus.forEach((e, i) => {
    series[i].append(new Date().getTime(), Math.random() * 100); // Example data
  });
}

＆＃13;

/* A bit of CSS so this snippet won't hurt your eyes too much */

#charts_container>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 15px;
}

h1 {
  font-size: 1.2em;
  font-family: sans-serif;
  margin-right: 15px;
}

canvas {
  background-color: black;
}

＆＃13;

<!-- Include Smoothie Charts for this example -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.32.0/smoothie.min.js"></script>

<!-- Container element -->
<div id="charts_container">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

原来DOM太慢了。

我通过在异步函数中为每个核心的图表创建DOM来修复问题，然后初始化每个SmoothieChart＆amp; TimeSerie。请参阅下面的代码。

＆＃13;

＆＃13;

const container = document.getElementById("charts_container");
const data = {
  cores: 4
}; // Retrieved through an NPM library
const cpus = [1, 2, 3, 4];


var series = [];
var charts = [];

let createCoresDOM = () => {
  return new Promise(resolve => {
    for (var i = 0; i < data.cores; i++) {
      // Create DOM for each core
      container.innerHTML += `<div>
            <h1>CORE #${i}</h1>
            <canvas id="cpu_canvas_${i}" height="60"></canvas>
            </div>`;

      if (i === data.cores - 1) {
        // When we reached the last core, resolve the promise
        resolve(true);
      }
    }
  });
};
async function waitForCoresDOM() {
  let result = createCoresDOM();
  return await result;
}

waitForCoresDOM().then(() => { // Note how this line is pretty self-explanatory :)
  for (var i = 0; i < data.cores; i++) {
    // For each core...

    // Create a new TimeSeries
    series.push(new TimeSeries());

    // Create a new chart
    let serie = series[i];
    let chart = new SmoothieChart();

    chart.addTimeSeries(serie);
    chart.streamTo(document.getElementById(`cpu_canvas_${i}`), 500);

    charts.push(chart);
  }

  // Initialize the series updater
  updateInfo();
  var infoUpdater = setInterval(() => {
    updateInfo();
  }, 500);
});

function updateInfo() {
  cpus.forEach((e, i) => {
    series[i].append(new Date().getTime(), Math.random() * 100); // Example data
  });
}

＆＃13;

/* A bit of CSS so this snippet won't hurt your eyes too much */

#charts_container>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 15px;
}

h1 {
  font-size: 1.2em;
  font-family: sans-serif;
  margin-right: 15px;
}

canvas {
  background-color: black;
}

＆＃13;

<!-- Include Smoothie Charts for this example -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.32.0/smoothie.min.js"></script>

<!-- Container element -->
<div id="charts_container">
</div>

＆＃13;

＆＃13;

＆＃13;