javascript - 如何将数百个 JS 对象属性放入数组中以用作 chart.js 轴/数据

Question

您好，我正在尝试使用 Chart.JS 构建一个加密跟踪器应用程序。

我有 2 小时的价格数据，以数组中 120 个对象的形式出现。我想使用数组中每个对象的“高”和“时间”属性作为图表的轴。

我将如何获取这些并将它们作为标签和数据集数据插入到 chart.JS 的数据部分？我需要创建一些变量和循环吗？与地图功能有关吗？

这些是我的一些预感，但我很讨厌菜鸟，感谢任何帮助，谢谢！

标签： javascriptarrayschartschart.jsjavascript-objects

Answer 1

好吧，听着你这个臭菜鸟。你已经完成了 99% 的工作。

首先，我们将您的问题改写为一个笼统的问题，以平息困扰 stackoverflow 的愤怒情绪：

我有一系列加密价格。如何将其转化为chart.js 可以使用的数据？

这是一个“做我的家庭作业”的问题，这将使 stackoverflow 抛出语法错误并可能引发愤怒的反对票。

因此，我们必须分解它，找到问题的症结并加以整理。

• 接受什么chart.js作为数据？
  • 在chart.js的网页中，您可以找到它的文档，这些文档看起来写得很好。由于您想绘制价格与时间的关系，因此您需要积分，也就是[{x:<high price>, y:<time>}].
• 你有什么样的数据？
  • 根据你的问题和照片，你有类似的东西：[{high: 1, time: 2, ... /*etc*/}]

现在你可以问类似

如何将一种类型的对象数组转换为另一种类型的对象数组？

我必须用一些图书馆来绘制加密价格。如何优雅地将数组{high: 1, time: 2, ... /*etc*/}转换为数组{x:<high price>, y:<time>}？

可能会发生三件事。一，你会发现其他人已经问过同样的问题，如果不先采取这一步，你是不会知道的。第二，通过尝试找到更好的方法来提出问题，您自己找到了答案（您几乎做到了，顺便说一句，干得好）。第三，无论如何你仍然需要问它，但现在你的问题很漂亮，你会吸引所有的 stackoverflow 小仙女，他们现在将竞相回答你的有价值的问题，即使认为这是和以前一样的问题。

其次，我们使用map 函数将一种类型的对象数组转换为另一种类型的对象数组。

var cryptoprices = [
  {high:1, time:1, fields:"that", you:"don't", care:"about"},
  {high:9, time:2, otherfields:"that", arein:"theway"}
];

//map is a function that all arrays have.
//It calls a function on each array element, and returns an array with the results of that function.
//So you only need to focus on how you would transform a single cryptoprice into a single point of data:
function transform(cryptoprice) {
  //A single point should be an object that contains only the fields x and y.
  //Since you are interested in the price and time fields only...
  let point = {
    x: cryptoprice.time,
    y: cryptoprice.high
  }
  return point;
}

var points = cryptoprices.map(transform)
console.log(points);
// expected output: Array [Object { x: 1, y: 1 }, Object { x: 2, y: 9 }]

最后，简短而优雅的版本：

cryptoprices.map(c => ({x:c.time, y:c.high}))

:D