Линейный график множества данных из таблицы

Question

Я пытаюсь создать линейный график с несколькими наборами, используя диаграммы js и angular. Используя карту, я могу свести данные json к одному массиву измерений, но мне нужно преобразовать один из столбца (заголовок) в качестве метки со средним столбцом в виде оси Y, а столбец отметки времени в виде оси X

Образец формата JSON O / P из DB

var dataset = 
[{id:1, head:test1,timestamp:5/6/2019,average:12},]
{id:2, head:test1,timestamp:6/6/2019,average:15},
{id:3, head:test2,timestamp:5/6/2019,average:7},
{id:4, head:test2,timestamp:6/6/2019,average:20},
{id:5, head:test3,timestamp:6/6/2019,average:13}]

Ожидаемый формат для chartjs для вывода по нескольким осям Y

 {data : [12, 15], label:test1},
 {data : [7, 20], label:test2},
 {data : [0, 13], label:test3},

Я могу преобразовать только каждый из данных столбца как одномерный массив, но, поскольку я преобразую весь набор данных в одномерный массив, есть вероятность несоответствия данных, если я попытаюсь напрямую извлечь из него график.

var labels = dataset.map(function(obj) {return obj.head});
var tstamp = dataset.map(function(obj) {return obj.timestamp});
var tavg = dataset.map(function(obj) {return obj.average});

Пожалуйста, дайте мне знать ваши предложения о том, как преобразовать данные в ожидаемый формат.

Answer 1

Сначала необходимо уменьшить объект путем индексации результата:

const data = dataset.reduce((accu, item) => {
  if (accu[item.head] == null) accu[item.head] = { data: [], label: item.head };
  accu[item.head].data.push(item.average);
  return accu;
}, {});

, затем извлечь значения из результата

const result = Object.values(data);

, после чего вы можете дополнить поле результата .data дополучить правильную артерию

result.forEach(line => {
  while (line.data.length < 2) 
    line.data.unshift(0);
});