React-chartjs-2：如何在条形图中显示过去 5 年的发布日期时间线？

Question

给定这样的结构

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"],
但无法在图表中实现它。这是代码示例和 sandbox link

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

任何帮助将不胜感激

Answer 1

不确定您要查找的结果，但以下代码将生成一个图表，其中包含发布的每一年的条形图。

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

export const data = {
  labels,
  datasets: [
    {
      label: "Released",
      data: products.map(p => p.status === "released" ? 1:0),
      backgroundColor: "rgba(255, 99, 132, 0.5)"
    }
  ]
};

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

React-chartjs-2：如何在条形图中显示过去 5 年的发布日期时间线？

React-chartjs-2: How to display timeline of released dates over 5 past years in Bar Chart?

reactjs

chart.js

react-chartjs-2