javascript - ChartJS ReactJS 对象的对象

Question

我有一个像这样的对象:

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

我想使用 ChartJS 将其显示在折线图上，其中 day1、day2、day3 是标签，found/lost 是两条不同的线。我尝试过使用类似的东西，但我希望有一些更动态的方式，以防将第三个键添加到内部对象中，而不是将其全部插入数组中。或者也许是一种无需首先将所有值存储在数组中的方法。

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,
        }
      ],
    }}
  />

Answer 1

首先提取标签:

const labels = Object.keys(data);

然后是值:

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