如何为MUI-X <BarChart>的不同柱状条分配指定颜色？

步骤1：数据预处理 #

先把原始日期数组转换成图表需要的统计格式，统计每个日期（含缺失日期）的出现次数：

const correctDate = "21.05.2003";
const rawDates = [
  "21.05.2003",
  "21.05.2005",
  null,
  "27.05.2003",
  "21.05.2003",
  null,
  "21.05.2005",
];

// 统计各日期出现次数
const dateCounts = rawDates.reduce((acc, date) => {
  const key = date ?? '缺失日期';
  acc[key] = (acc[key] || 0) + 1;
  return acc;
}, {});

// 转换为图表可识别的数据格式
const chartData = Object.entries(dateCounts).map(([date, count]) => ({
  date,
  count,
}));

步骤2：颜色映射逻辑 #

根据需求定义颜色匹配规则，直接调用自定义主题中的颜色变量：

// 根据日期返回对应主题颜色
const getBarColor = (date, theme) => {
  if (date === correctDate) {
    return theme.palette.success.main; // 绿色
  } else if (date === '缺失日期') {
    return theme.palette.error.main; // 红色
  } else {
    return theme.palette.warning.main; // 黄色
  }
};

步骤3：完整BarChart实现 #

结合MUI-X的BarChart组件和ThemeProvider应用自定义主题，在系列配置中动态设置柱状条颜色：

import { ThemeProvider } from '@mui/material/styles';
import { BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from '@mui/x-charts';
import realTimeTheme from './realTimeTheme'; // 导入你的自定义主题

const DateBarChart = () => {
  // 数据预处理
  const dateCounts = rawDates.reduce((acc, date) => {
    const key = date ?? '缺失日期';
    acc[key] = (acc[key] || 0) + 1;
    return acc;
  }, {});
  const chartData = Object.entries(dateCounts).map(([date, count]) => ({ date, count }));

  return (
    <ThemeProvider theme={realTimeTheme}>
      <ResponsiveContainer width="100%" height={400}>
        <BarChart
          data={chartData}
          xAxis={[{ dataKey: 'date', label: '日期' }]}
          yAxis={[{ label: '数量' }]}
          series={[
            {
              dataKey: 'count',
              label: '数量',
              // 为每个柱状条动态分配颜色
              color: (params) => getBarColor(params.rawData.date, realTimeTheme),
            },
          ]}
        >
          <Tooltip />
        </BarChart>
      </ResponsiveContainer>
    </ThemeProvider>
  );
};

export default DateBarChart;

关键说明 #

• 数据预处理：用reduce快速统计频次，将null统一标记为“缺失日期”，确保统计无遗漏。
• 动态颜色分配：利用MUI-X BarChart的series.color支持函数的特性，根据每个数据项的日期返回对应主题颜色，完全匹配需求中的着色规则。
• 主题集成：通过ThemeProvider包裹组件，直接复用自定义主题的颜色变量，保证样式统一。

内容的提问来源于stack exchange，提问作者Harmo-Ron Kallaste