React中用聚类条形图替代单条形图的实现求助

问题根源 #

你的代码存在两个核心问题，导致无法生成目标聚类条形图：

1. 异步请求未正确处理：Service.fetchData()是异步操作，但你没有用await获取实际结果，导致result是Promise对象而非有效数据。
2. 数据格式与Recharts聚类条形图要求不匹配：当前将数据转换为[{label: x, value: y}]的结构，每个条目仅包含单个值，且所有Bar组件都使用同一个dataKey="value"，最终导致所有系列重叠成单条。

分步修正 #

1. 修复异步数据获取 #

确保正确获取异步接口返回的数据，在fetchData函数中添加await：

const fetchData = async () => {
  try {
    const result = await Service.fetchData();
    setData(result);
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};

2. 调整数据格式为聚类条形图所需结构 #

Recharts的聚类条形图要求数据是一个数组，每个元素需包含X轴类别名称和多个系列的数值。假设你的后端返回的数据结构如下（对应PHP+Chart.js的聚类数据结构）：

// 示例后端返回数据
{
  "January": { "Phishing": 20, "Smishing": 15, "Vishing": 5 },
  "February": { "Phishing": 25, "Smishing": 18, "Vishing": 8 },
  "March": { "Phishing": 18, "Smishing": 22, "Vishing": 10 }
}

需要将其转换为Recharts可直接使用的格式：

// 转换后的数据结构
[
  { name: "January", Phishing: 20, Smishing: 15, Vishing: 5 },
  { name: "February", Phishing: 25, Smishing: 18, Vishing: 8 },
  { name: "March", Phishing: 18, Smishing: 22, Vishing: 10 }
]

修改数据转换逻辑：

const formattedData = Object.entries(data).map(([name, series]) => ({
  name,
  ...series
}));

3. 修改BarChart组件配置 #

基于转换后的数据，为每个系列单独配置Bar组件：

{data ? (
  <>
    <h3>Bar Chart</h3>
    {(() => {
      const formattedData = Object.entries(data).map(([name, series]) => ({
        name,
        ...series
      }));
      // 获取所有系列名称（如Phishing、Smishing等）
      const seriesNames = Object.keys(data[Object.keys(data)[0]]);

      return (
        <BarChart width={600} height={400} data={formattedData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          {/* 为每个系列生成独立的Bar组件 */}
          {seriesNames.map((series, index) => (
            <Bar
              key={`bar-${series}`}
              dataKey={series}
              fill={COLORS[index % COLORS.length]}
            />
          ))}
        </BarChart>
      );
    })()}
  </>
) : (
  <p>Loading data...</p>
)}

额外注意事项 #

• 如果后端返回的数据结构与示例不同，需根据实际结构调整数据转换逻辑，核心是保证每个数据条目包含X轴类别名称和所有系列的数值。
• 可根据系列数量扩展COLORS数组，避免颜色重复。

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