MUI X-Charts堆叠柱状图圆角改造报错：Cannot read properties of undefined

我正在学习图表开发，想要实现上下带圆角的堆叠柱状图。参考资料修改MUI X-Charts库后，在Products页面引入改造后的组件时触发如下报错：

Error in /turbo_modules/@mui/x-charts@6.19.4/BarChart/BarChart.js (60:89) Cannot read properties of undefined (reading 'some')

已尝试搜索相关解决方案但未找到有效结果，现附上代码、报错截图及在线可运行示例，请求协助排查并解决该报错。

改造后的组件代码 #

import * as React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  Rect,
} from '@mui/x-charts';

const data = [
  { category: 'A', series1: 40, series2: 25 },
  { category: 'B', series1: 30, series2: 50 },
  { category: 'C', series1: 60, series2: 10 },
];

const chartHeight = 300;
const barSpacing = 2;
const cornerRadius = 5;
const numBarsPerCategory = 2; // 假设每个分类下有2个柱子
const totalBarWidth = 80; // 一组柱子的总宽度
const maxValue = data.reduce(
  (max, item) => Math.max(max, item.series1 + item.series2),
  0
);

function StackOrderModified() {
  return (
    <BarChart data={data}>
      <XAxis dataKey="category" />
      <YAxis />
      <Tooltip />
      <Legend />
      {console.log('Data in StackOrderModified:', data)}

      {data.map((item, index) => (
        <React.Fragment key={index}>
          <Rect
            x={calculateXPosition(item, index)}
            y={calculateYPosition(item, index)}
            width={calculateBarWidth(index)}
            height={calculateBarHeight(item)}
            rx={cornerRadius}
            ry={cornerRadius}
            fill="#fff" // 匹配图表背景色
          />
          <Bar
            stackId="stack1"
            dataKey="series1"
            stackOffset="expand"
            // ... 其他Bar组件属性
          />
          <Bar
            stackId="stack1"
            dataKey="series2"
            stackOffset="expand"
            // ... 其他Bar组件属性
          />
        </React.Fragment>
      ))}
    </BarChart>
  );
}

// **** 辅助函数 ****
function calculateXPosition(item, index) {
  console.log('Current Item within Map:', item);
  const barIndexInGroup = index % numBarsPerCategory;
  const groupIndex = Math.floor(index / numBarsPerCategory);
  return (
    groupIndex * totalBarWidth +
    barIndexInGroup * (totalBarWidth / numBarsPerCategory) +
    barSpacing
  );
}

function calculateYPosition(item, index) {
  console.log('Current Item within Map:', item);

  // 假设垂直图表，0坐标在底部
  return chartHeight - calculateBarHeight(item);
}

function calculateBarWidth(index) {
  return totalBarWidth / numBarsPerCategory - barSpacing * 2;
}

function calculateBarHeight(item) {
  console.log('Current Item within Map:', item);

  const hasData = item.series1 !== undefined && item.series2 !== undefined; // 检查数据是否存在
  const value = hasData ? item.series1 + item.series2 : 0; // 数据缺失时用0替代
  const proportionOfChartHeight = value / maxValue; // maxValue为数据中的最大总和
  return chartHeight * proportionOfChartHeight;
}

export default StackOrderModified;

相关资源 #

• 报错截图：
• 在线可运行示例：包含完整代码的StackBlitz项目，可查看Products页面的报错情况
• 预览页面：可访问对应预览页查看实际报错效果

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