如何分配<BarChart>

Question

我想这样给酒吧上色：

Date

count

彩 格林 21.05.20052叶27.05.20031叶日期 trone这样的东西（如果我以proper的方式理解你...）

	21.05.2003	2
2
思想上的颜色将来自一个主题：	import { createTheme } from "@mui/material/styles"; import { green, red, yellow } from '@mui/material/colors'; const realTimeTheme = createTheme( { palette: { success: { main: green['A200'], light: green['A700'] }, error: { main: red[500], light: red[700] }, warning: { main: yellow[300], light: yellow[500], }, }, }, ); export default realTimeTheme;	有人可以对如何实现这样的目标提供一些见解？

import { BarChart } from "@mui/x-charts/BarChart";
import { createTheme } from "@mui/material/styles";
import { green, red, yellow } from "@mui/material/colors";

const realTimeTheme = createTheme({
  palette: {
    success: { main: green["A200"], light: green["A700"] },
    error: { main: red[500], light: red[700] },
    warning: { main: yellow[300], light: yellow[500] },
  },
});

export default function MyBarChart() {
  const aggregatedData = [
    { date: "21.05.2003", count: 2 },
    { date: "21.05.2005", count: 2 },
    { date: "27.05.2003", count: 1 },
    { date: "Missing date", count: 2 },
  ];

  const dates = aggregatedData.map((item) => item.date);
  const counts = aggregatedData.map((item) => item.count);

  const barColors = [
    realTimeTheme.palette.success.main, // for 21.05.2003
    realTimeTheme.palette.warning.main, // for 21.05.2005
    realTimeTheme.palette.warning.main, // for 27.05.2003
    realTimeTheme.palette.error.main, // for Missing date
  ];

  return (
    <BarChart
      width={500}
      height={300}
      series={[{ data: counts, id: "dateCount" }]}
      xAxis={[
        {
          scaleType: "band",
          data: dates,
          colorMap: {
            type: "ordinal",
            values: dates,
            colors: barColors,
          },
        },
      ]}
    />
  );
}

CodesandBox