ChartJS ReactJS对象的对象



我有一个这样的对象:

data = {
"day1": {
"found": 0,
"lost": 3
},
"day2": {
"found": 1,
"lost": 2
},
"day3": {
"found": 0,
"lost": 3
}
}

我想使用ChartJS在折线图上显示这一点,第1天、第2天和第3天是标签,发现/丢失是两条不同的线。我试过使用这样的方法,但我希望有一种更动态的方法,以防将第三个键添加到内部对象中,而不是将其全部推到数组中。或者可能是一种不必首先将所有值存储在数组中的方法。

var found = [];
var lost = [];
Object.entries(data).map(([key]) => {
[rates[key]].map(row => {
found.push(row.found);
lost.push(row.lost);
})
});

<Line
data={{
labels: Object.keys(data),
datasets: [
{
data: found
label: "found"
borderColor: "blue",
fill: true,
},
{
data: lost
label: "lost"
borderColor: "red",
fill: true,
}
],
}}
/>

首先提取标签:

const labels = Object.keys(data);

然后是值:

const found = labels.map(label => data[label].found);
const lost= labels.map(label => data[label].lost);

最新更新