将Json数据分组多年，以便使用amchart创建堆叠条形图

Question

我正在使用amchart为dataProvider准备数据来创建像这样的https://www.amcharts.com/demos-v3/stacked-column-chart-v3/的堆积柱形图，我有我的服务的响应，如下所示，我想按年分组数据，所以我必须更改json数据：

"Annee": "2018 / 2019",
"Chargeniv1": "Centre",
"MensuelCout": 123
},
{
"Annee": "2018 / 2019",
"Chargeniv1": "Main",
"MensuelCout": 456
},
{
"Annee": "2018 / 2019",
"Chargeniv1": "principaux",
"MensuelCout": 789
},
{
"Annee": "2017 / 2018",
"Chargeniv1": "structure",
"MensuelCout": 101
},
{
"Annee": "2017 / 2018",
"Chargeniv1": "principaux",
"MensuelCout": 629
},
{
"Annee": "2017 / 2018",
"Chargeniv1": "Main",
"MensuelCout": 985
}]

这样

[{
  "annee":"2018 / 2019"
  "Centre": 637612,
  "Main": 456,
  "principaux": 789,
    },
 {
  "annee":"2017 / 2018"
  "Centre": 101,
  "principaux": 629,
  "Main": 987,
}]

感谢您的关注

Answer 1

您可以使用函数reduce按年度对对象进行分组，使用函数Object.values来提取分组对象。

let array = [ { "Annee": "2018 / 2019", "Chargeniv1": "Centre", "MensuelCout": 123 }, { "Annee": "2018 / 2019", "Chargeniv1": "Main", "MensuelCout": 456 }, { "Annee": "2018 / 2019", "Chargeniv1": "principaux", "MensuelCout": 789 }, { "Annee": "2017 / 2018", "Chargeniv1": "structure", "MensuelCout": 101 }, { "Annee": "2017 / 2018", "Chargeniv1": "principaux", "MensuelCout": 629 }, { "Annee": "2017 / 2018", "Chargeniv1": "Main", "MensuelCout": 985 }];
let result = Object.values(array.reduce((a, {Annee, Chargeniv1, MensuelCout}) => {
  a[Annee] = a[Annee] || (a[Annee] = {Annee});
  a[Annee][Chargeniv1] = (a[Annee][Chargeniv1] || 0) + MensuelCout;
  return a;
}, {}));

console.log(result);

.as-console-wrapper { min-height: 100%; }

Answer 2

我将使用过滤功能和新设置为独特的年份。

你的json回复：

    let data = [
          {
            Annee: "2018 / 2019",
            Chargeniv1: "Centre",
            MensuelCout: 123
          }...
        ];

获得所有年份：

var years = new Set();
data.forEach((element, index) => {
  years.add(element.Annee);
});

使用数据创建一个新数组并根据需要进行组织。

var newData = [];
uniqueYears.forEach((year, index) => {
  newData.push({ year: year, cities: data.filter(y => y.Annee === year) });
});