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

Question

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

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

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

这些是我的一些预感，但我是个菜鸟，感谢任何帮助，谢谢!

Answer 1

好吧，听着，你这个臭菜鸟。您已经成功了 99%。

首先，我们将您的问题改写为一个通用问题，以安抚困扰 stackoverflow 的愤怒情绪:

I have an array of cryptoprices. How do I turn it into data that chart.js can use?

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

所以我们必须把它分解，找到问题的症结，把它整理好。

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

现在你可以问类似的问题

How can I convert an array of objects of one type into an array of objects of another type?

I have to draw cryptoprices with some library. How can I elegantly transform an array of {high: 1, time: 2, ... /*etc*/} into an array of {x:<high price>, y:<time>}?

可能会发生三件事。第一，您发现其他人已经问过同样的问题，如果不先采取这一步，您就不会知道这个问题。第二，通过尝试找到更好的方式来提出问题，您自己找到了答案(which you almost did，顺便说一句，干得好)。第三，无论如何你仍然需要问它，但现在你的问题很漂亮，你将吸引所有的 stackoverflow 仙女，他们现在将竞相回答你有值(value)的问题，even thought it's same question as before .

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

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