表中的多数据集线图

Question

我试图创建一个多集线图使用图表js和角度。使用map，我可以将json数据简化为一维数组，但我需要将列(头)转换为标签，平均列为y轴，时间戳列转换为x轴。

来自DB的json格式o/p示例

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}]

用于多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);
});