Question

我正在尝试创建统计饼图。作为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;)

毫无头绪。

这听起来可能很愚蠢，但是可以提供任何帮助。：）

Answer 1

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

Answer 2

您可以寻找相同的键并更新或插入新对象。

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

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

根据数字键对对象数组进行分组和求和

2 个答案: