【Rechart.js/JavaScript】datasとlabelをreduceを使って作る
先日塾生から
population:[
[{ // 1つ目のデータ
"year": 1980,
"value": 12817
}, {
"year": 1985,
"value": 12707
}, {
"year": 1990,
"value": 12571
}],
[{
"year": 1980,
"value": 12817
}, {
"year": 1985,
"value": 12707
}, {
"year": 1990,
"value": 12571
}],
[{
"year": 1980,
"value": 12817
}, {
"year": 1985,
"value": 12707
}, {
"year": 1990,
"value": 12571
}]
]
このようなデータを
{
labels: [
data.year, data.year, data.year…
],
datasets: [
{
data: [data.value, data.value, data.value,…],
},
{
data: [data.value, data.value, data.value,…],
},
{
data: [data.value, data.value, data.value,…],
},
],
}
このようにしたいという相談?投稿があって
書いたのがこれです
const population = [
[{
"year": 1980,
"value": 1
}, {
"year": 1985,
"value": 2
}, {
"year": 1990,
"value": 3
}],
[{
"year": 1980,
"value": 2
}, {
"year": 1985,
"value": 22
}, {
"year": 1990,
"value": 23
}],
[{
"year": 1980,
"value": 3
}, {
"year": 1985,
"value": 32
}, {
"year": 1990,
"value": 33
}]
];
const result = population.reduce((prev, current) => {
const datas = current.map((e) => e.value)
const labels = current.map((e) => e.year)
const mergedLabels = prev.labels !== undefined ? [...prev.labels, ...labels] : [...labels]
const mergedDatas = prev.datas !== undefined ? [ ...prev.datas, {data: datas}] : [{data: datas}]
return {labels: mergedLabels, datas: mergedDatas}
}, {})
result
{
datas: [{ data: [1, 2, 3] }, { data: [2, 22, 23] }, { data: [3, 32, 33] },
labels: [1980, 1985, 1990, 1980, 1985, 1990, 1980, 1985, 1990]
}
速度は考慮してないです。みやすさを重視しました
自分はreduceが好きなのでよく使いがちです
作るデータが階層構造を持っているとマージするところちょっとややこしいですよね
(labelsは全てを平にしていいのかは疑問)