给定这样的结构

const products = [
  {
    id: 1,
    status: "released"
  },
  {
    id: 2,
    status: "in progress"
  },
  {
    id: 3,
    status: "in progress"
  },
  {
    id: 4,
    status: "released"
  },
  {
    id: 5,
    status: "released"
  }
];

我试图显示过去5年发布日期的时间表。
正如你所看到的，在上面的对象数组中，status属性可以是不同的。所以我的目标是在一个图表中显示已发布对象的时间线，假设每年都对应于数组中对象的索引。
所以，对于
数组中的第一个对象将与年份2018匹配。
第二：2019，
第三个：2020等等。
但是，图表不应突出显示所有对象，而应具有所有年份的标签，并且只突出显示状态为released的对象。
我为标签创建了一个对象，如下所示
const labels = ["2018", "2019", "2020", "2021", "2022"]，
但无法在图表中实现它。

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const
    },
    title: {
      display: true,
      text: "Chart.js Bar Chart"
    }
  }
};

const products = [
  {
    id: 1,
    status: "released"
  },
  {
    id: 2,
    status: "in progress"
  },
  {
    id: 3,
    status: "in progress"
  },
  {
    id: 4,
    status: "released"
  },
  {
    id: 5,
    status: "released"
  }
];

const labels = ["2018", "2019", "2020", "2021", "2022"];

export const data = {
  labels,
  datasets: [
    {
      label: "Dataset 1",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
      backgroundColor: "rgba(255, 99, 132, 0.5)"
    },
    {
      label: "Dataset 2",
      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
      backgroundColor: "rgba(53, 162, 235, 0.5)"
    }
  ]
};

export function App() {
  return <Bar options={options} data={data} />;
}

任何帮助都将不胜感激