Разделить массив объектов на массив для осей X и Y на графике?
У меня есть следующий ответ json из моей базы данных:
let data = [
{sum: "42", year: "2018", monthNum: "12", month: "Dec"},
{sum: "24", year: "2019", monthNum: "01", month: "Jan"},
{sum: "20", year: "2019", monthNum: "02", month: "Feb"},
{sum: "41", year: "2019", monthNum: "03", month: "Mar"}
]
И я хочу использовать эти данные для диаграммы, где я откладываю «сумму» по оси Y и месяцы по оси X. Проблема в том, что я не уверен, как сделать так, чтобы каждое значение x соответствовало правильному значению y. Всякий раз, когда я пытаюсь построить его (путем разделения массива и т. д.), диаграмма отображает данные неправильно, например, март покажет сумму 20 или январь покажет сумму 42.
Я пробовал что-то вроде
data.map(m => m.sum); для оси Y и
data.map(m => m.year + " " + m.month);для оси x.
Это просто возвращает два завершенных массива, отключенных друг от друга, например
["42", "20", "24", "41"]
и
["2018 Dec", "2019 Mar", "2019 Jan", "2019 Feb"]
Как бы я "связать" их вместе?
Я включил год и номер месяца, чтобы иметь возможность сортировать/фильтровать их и отображать в хронологическом порядке. В идеале просто что-то вроде «декабрь 2018» по оси X привязано к sum 42, за которым следует «январь 2019» -> 24 и т. д.
Ну, они связаны вместе индексом. Другими словами, sums[0] и dates[0] оба для data[0]. В зависимости от используемого компонента диаграммы этого может быть достаточно.
Что такое "привязан"? С точки зрения JS, в каком формате это должно быть, предоставьте пример точный для этих данных
Вот что показывает моя диаграмма: prntscr.com/mmv68j — как видите, это неверные значения для каждого соответствующего месяца.
Что ж, не нужно разделять данные перед построением графика, просто обрабатывайте оси x/y, когда вы перебираете свой единственный массив и получаете их положение в то время, когда вы хотите их отобразить (так же, как вы сейчас извлекаете точки оси )
Вот какие входные данные требуются для диаграммы: chartOptions: {chart: {id: "basic-bar" }, xaxis: { Categories: [] } }, series: [ { name: "hours", data: [] } ]
Возвращаемый результат на самом деле не имеет смысла. Массив упорядочен. map должен связать их вместе. Проблема должна быть где-то в другом.
Хотите показать мне, как структурировать данные с помощью переменной data, которую я разместил в исходном посте? Вот скриншот "что куда идет". sum должно идти в seriesdata, а месяцы должны идти в xaxis.categoriesprntscr.com/mmv7tv
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Какой формат вы хотите, чтобы они были в конечном итоге?