Как получить сотни свойств объекта JS в массивы для использования в качестве координат / данных chart.js - PullRequest
Новая
       12

Как получить сотни свойств объекта JS в массивы для использования в качестве координат / данных chart.js

1 голос
/ 10 октября 2019

image of data coming in from API

Привет, я пытаюсь создать приложение криптографического отслеживания с Chart.JS.

У меня есть данные о ценах за 2 часа, поступающие в формеиз 120 объектов в массиве. Я хочу использовать свойства 'high' и 'time' для каждого объекта в массиве в качестве осей диаграммы.

Как мне взять их и вставить их в раздел данных chart.JS 'в качестве меток иданные набора данных? Нужно ли мне создавать переменные и циклы? Что-то связанное с функцией карты?

У меня есть такие догадки, но я вонючий нуб и благодарен за любую помощь в этом, спасибо!

1 Ответ

0 голосов
/ 10 октября 2019

Хорошо, слушай, вонючий нуб. Вы на 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>}?

Возможны три вещи. Во-первых, вы обнаружите, что кто-то другой уже задавал этот же вопрос, который вы бы не узнали, не сделав сначала этот шаг. Во-вторых, пытаясь найти лучший способ задать вопрос, вы сами нашли ответ (, который вы почти сделали , кстати, хорошая работа). В-третьих, вам все равно нужно его задать, но теперь ваш вопрос довольно симпатичный, и вы привлечете всех фей стека-переполнения, которые теперь будут соревноваться, чтобы ответить на ваш достойный вопрос, даже думал, что это тот же вопрос, что и раньше .

Второй , мы преобразуем массив объектов одного типа в массив объектов другого типа, используя функцию карты 

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

...