Chart.js散点图Dataset：如何用for循环动态生成数据？

当然可以用循环替代手动编写散点数据，这样就能适配用户输入带来的动态数据量变化。你的values数组是按[x1, y1, x2, y2, ...]的顺序存储成对坐标的，只需要遍历数组，每取两个元素生成一个散点对象即可。

方法1：for循环（直观易懂） #

const values = ["1", "2", "3", "4", "5", "6", "7", "8"];
const scatterData = [];

// 每次步进2，遍历所有成对的x、y值
for (let i = 0; i < values.length; i += 2) {
  // 避免数组长度为奇数时出现无对应y值的情况
  if (i + 1 < values.length) {
    scatterData.push({
      x: values[i],
      y: values[i + 1]
    });
  }
}

const data = {
  datasets: [
    {
      data: scatterData,
      backgroundColor: "#55c4ec"
    }
  ]
};

const myChart = new Chart(document.getElementById("myChart"), {
  type: "scatter",
  data: data
});

方法2：Array.reduce（简洁的函数式写法） #

如果偏好更简洁的写法，可以用数组的reduce方法来生成数据：

const values = ["1", "2", "3", "4", "5", "6", "7", "8"];

const scatterData = values.reduce((acc, curr, index) => {
  // 仅处理偶数索引的元素（对应x值），并取下一个元素作为y值
  if (index % 2 === 0 && index + 1 < values.length) {
    acc.push({
      x: curr,
      y: values[index + 1]
    });
  }
  return acc;
}, []);

const data = {
  datasets: [
    {
      data: scatterData,
      backgroundColor: "#55c4ec"
    }
  ]
};

const myChart = new Chart(document.getElementById("myChart"), {
  type: "scatter",
  data: data
});

补充说明 #

• 两种写法都能自动适配values数组的长度变化，不管用户输入多少成对的坐标，都能生成对应的散点数据。
• 代码中加入了边界判断，当数组长度为奇数时，会忽略最后一个无对应y值的元素，避免出现undefined的情况。

内容的提问来源于stack exchange，提问作者Jacqui