React MUI BarChart单类别单值分色实现问题求助

你的问题出在每个类别创建了独立的series，导致图表把每个柱子当成不同系列处理，而非同一系列下的不同数据点。正确的做法是用单个series包含所有数据，再为每个数据点指定对应颜色。

修正后的代码 #

import { BarChart } from '@mui/x-charts/BarChart';
import { BarSeriesType } from '@mui/x-charts/models';

const data = [2, 5, 3, 6, 8, 11, 8];
const categories = [
  "Oral Ambalaj",
  "Onkolotik",
  "Görsel Kontrol",
  "Oral Üretim",
  "Steril Ambalaj",
  "Steril Üretim",
  "Diğer"
];
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FF8F33', '#33FFF5', '#B833FF'];

// 单个series包含所有数据，通过colorAccessor匹配对应颜色
const series: BarSeriesType[] = [{
  type: 'bar',
  data: data,
  // 用索引匹配颜色数组
  colorAccessor: (_datum, index) => colors[index],
  label: 'Kategori Değerleri' // 可选：系列标签
}];

function CustomBarChart() {
  return (
    <BarChart
      xAxis={[
        {
          id: "barCategories",
          data: categories,
          scaleType: "band",
        },
      ]}
      series={series}
      width={800}
      height={300}
      barLabel="value"
    />
  );
}

export default CustomBarChart;

关键改动说明 #

• 合并series：将原来的多个series合并为一个，data直接传入完整的数值数组，确保所有柱子属于同一系列，共享Y轴。
• 使用colorAccessor：通过colorAccessor回调函数，根据每个数据点的索引从colors数组中取对应颜色，实现单系列内每个柱子的分色效果。
• 移除冗余代码：删掉了原来循环创建多个series的逻辑，简化结构。

另一种实现方式（直接传入颜色数组） #

如果你更倾向于直接传入颜色数组，也可以把color设置为colors数组：

const series: BarSeriesType[] = [{
  type: 'bar',
  data: data,
  color: colors, // 直接传入颜色数组，会按顺序匹配每个数据点
  label: 'Kategori Değerleri'
}];

内容的提问来源于stack exchange，提问作者Ali Kartal