Question

我正在尝试使用图表js和angular创建多组折线图。使用map可以将json数据简化为一个三维数组，但是我需要将column（head）之一转换为标签，将平均列作为y轴，将时间戳列作为x轴

从数据库中采样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轴输出的chartjs的预期格式

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

我只能将每个列数据转换为单个三维数组，但是由于我将整个数据集转换为1D数组，因此如果我尝试直接从中获取图形，则可能会出现数据不匹配的情况。

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

首先必须通过建立索引结果来减少对象：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

然后从结果中提取值

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);字段以获取正确的Ar

.data

表中的多数据集折线图

1 个答案: