如何用@mui/x-charts实现单产品对应单柱带图例的销量柱状图？

问题根源 #

你之前的错误在于将每个产品单独作为一个series，且每个series包含3个数据点（其中两个为null）。这种配置会让图表为每个series在所有x轴位置生成柱子，最终导致3个series×3个x轴位置=9根柱子，同时颜色和图例也会出现不匹配。

正确配置方案 #

应该将所有产品数据合并到单个series中，用x轴对应产品名称，y轴对应销量，再通过自定义图例实现每个产品标签与柱子颜色的对应。

代码示例

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

export default function ProductSalesChart() {
  // 原始产品销量数据
  const productSales = [
    { productName: "Corona", amountSold: 4550 },
    { productName: "Vodka Bull", amountSold: 3775 },
    { productName: "Gin Tonic", amountSold: 3247 },
  ];

  // 转换为图表所需格式
  const xAxisData = productSales.map(item => item.productName);
  const series = [{
    data: productSales.map(item => item.amountSold),
    // 为每个产品柱子分配唯一颜色
    colorMap: productSales.reduce((acc, _, idx) => {
      acc[idx] = `hsl(${idx * 120}, 70%, 50%)`;
      return acc;
    }, {}),
  }];

  // 自定义图例项，匹配每个产品的标签和颜色
  const legendItems = productSales.map((item, idx) => ({
    id: idx.toString(),
    label: item.productName,
    color: `hsl(${idx * 120}, 70%, 50%)`,
  }));

  return (
    <BarChart
      xAxis={[{ data: xAxisData, scaleType: 'band' }]} // 用band类型适配分类x轴
      series={series}
      width={600}
      height={400}
      legend={{
        items: legendItems, // 启用自定义图例
      }}
    />
  );
}

关键配置说明 #

• 单个series设计：所有产品销量作为同一个series的data数组，x轴数据为产品名称数组，确保每个x轴位置仅生成一根柱子。
• colorMap配置：通过colorMap为每个数据点（即每个产品柱子）指定唯一颜色，解决颜色不匹配问题。
• 自定义图例：手动构建legend.items数组，将每个产品的标签和对应颜色绑定，实现图例与柱子的精准对应。

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