ChartJS 如何在数组中连接两个对象

t5fffqht  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(137)

我想过滤dataset数组中的两个对象,我在react-chartjs-2中使用了这个方法。我不知道如何过滤。
示例:

First Object : {
    "id": 2,
    "customer_id": 4,
    "date": "2019-05-15T21:00:00.000Z",
    "wbc": 15,
    "vitamin": 14
}
Second Object : {
    "id": 3,
    "customer_id": 4,
    "date": "2022-05-22T21:00:00.000Z",
    "wbc": 20,
    "vitamin": 5
}

我需要这一点:

datasets: [
      {
        label: "WBC",
        data: [
          { x: "2019-05-15", y: 15 },
          { x: "2022-05-22", y: 20 },
        ],
        backgroundColor: "#003f5c",
        pointRadius: 8,
        pointHoverRadius: 8,
      },
      {
        label: "Vitamin",
        data: [
          { x: "2019-05-15", y: 14 },
          { x: "2022-05-22", y: 5 },
        ],
        backgroundColor: "#ffa600",
        pointRadius: 8,
        pointHoverRadius: 8,
      },
    ],
ttp71kqs

ttp71kqs1#

我会这样做:
1.将项目放在数组中,以便更容易管理;
1.使用数据集中所需的键创建一个数组:(* 白细胞 维生素 * 等......)和每个键的自定义设置(* 血糖-颜色 * 等......);
1.将keys数组缩减为包含具有所需形状的对象的datasets数组:

const items = [{
    id: 2,
    customer_id: 4,
    date: '2019-05-15T21:00:00.000Z',
    wbc: 15,
    vitamin: 14,
  },
  {
    id: 3,
    customer_id: 4,
    date: '2022-05-22T21:00:00.000Z',
    wbc: 20,
    vitamin: 5,
  },
];

const keys = [{
    type: 'wbc',
    settings: {
      backgroundColor: '#003f5c',
      pointRadius: 8,
      pointHoverRadius: 8,
    },
  },
  {
    type: 'vitamin',
    settings: {
      backgroundColor: '#ffa600',
      pointRadius: 8,
      pointHoverRadius: 8,
    },
  },
];

const datasets = keys.reduce((a, k) => {
  const o = {
    label: k.type.toUpperCase(),
    data: items.map((i) => ({
      x: new Date(i.date).toLocaleDateString(),
      y: i[k.type],
    })),
    ...k.settings,
  };
  a.push(o);
  return a;
}, []);

console.log(datasets);

相关问题