1

我正在尝试创建一个统计饼图。作为一个http response我从服务器获取一个列表，我需要使用它来绘制一个饼图。

例如： 收到的数据：

[{1: 9, 2: 7}, {3:8, 2: 1}, {1:8, 5:9}, {2:3, 3:1}]

这是所需的输出：

[{x: 1, y: 17}, {x: 2, y:10}, {x: 3, y: 9}, {x: 5, y: 9}]

请注意：x 是键，y 是相似键值的总和

我试过了data.forEach((item, index) => {})。在写完这篇文章之后，我实际上没有得到关于如何组合的线索Object.keys(item)，Object.values(item)并且Object.values(item).reduce((a,b)=> return a+b;)

这可能听起来很愚蠢的问题，但任何帮助将不胜感激。:)

4

2 回答 2

2

你可以 reduce阵列。创建一个累加器对象，每个数字作为键和对象，x键y作为它的值。循环遍历每个对象并y根据数字更新值。然后Object.values()在返回的对象上使用以获取累加器的值作为数组

const input = [{1: 9, 2: 7}, {3:8, 2: 1}, {1:8, 5:9}, {2:3, 3:1}]

const grouped = input.reduce((acc, obj) => {
  for (const x in obj) {
    acc[x] = acc[x] || { x , y: 0 }
    acc[x].y += obj[x]
  }
  return acc;
}, {})

console.log(Object.values(grouped))

于 2019-07-08T08:02:35.517 回答
0

您可以查找相同的密钥并更新或插入新对象。

这种方法不会改变键的顺序。

var data = [{ 1: 9, 2: 7 }, { 3: 8, 2: 1 }, { 1: 8, 5: 9 }, { 2: 3, 3: 1 }] ,
    result = data.reduce((r, o) => {
        Object.entries(o).forEach(([x, y]) => {
            var temp = r.find(o => o.x === x);
            if (temp) temp.y += y;
            else r.push({ x, y });
        });        
        return r;
    }, []);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

于 2019-07-08T08:05:03.163 回答