问反应-图表-2:如何在条形图中显示过去5年内发布日期的时间表？

EN

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

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} />;
}