如何基于react-chartjs-2将API返回数据转换为堆叠柱状图所需JSON格式

1. 安装必要依赖 #

先确保安装所需包：

npm install chart.js react-chartjs-2

2. 数据转换逻辑 #

你的原始数据是单条项目评估记录，要适配堆叠柱状图，需转换成项目为X轴标签、不同评估为独立数据集的格式：

// 原始API数据
const rawData = [
  {"project_id": 1,"project_name": "P1","assessment_id": 1,"assessment_name": "Assessment 01","maturity": "10"},
  {"project_id": 1,"project_name": "P1","assessment_id": 2,"assessment_name": "Assessment 02","maturity": "40"}
];

// 数据转换函数
const transformData = (data) => {
  // 提取唯一项目名（X轴标签）
  const projects = [...new Set(data.map(item => item.project_name))];
  // 提取唯一评估名（数据集名称）
  const assessments = [...new Set(data.map(item => item.assessment_name))];

  // 生成每个评估对应的数据集
  const datasets = assessments.map((assessment, index) => {
    // 匹配每个项目当前评估的成熟度，无数据则设为0
    const values = projects.map(project => {
      const matchItem = data.find(d => d.project_name === project && d.assessment_name === assessment);
      return matchItem ? parseInt(matchItem.maturity) : 0;
    });

    // 自定义数据集颜色（可按需修改）
    const colorList = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
    return {
      label: assessment,
      data: values,
      backgroundColor: colorList[index % colorList.length],
      stack: 'Stack 0' // 统一stack值实现堆叠
    };
  });

  return {
    labels: projects,
    datasets: datasets
  };
};

// 转换后的图表数据
const chartData = transformData(rawData);

3. 图表组件实现 #

编写React组件，配置堆叠模式并渲染图表：

import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';

// 注册Chart.js必需组件
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

export default function StackedBarChart() {
  // 图表配置，开启堆叠
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '项目成熟度堆叠柱状图',
      },
    },
    scales: {
      x: { stacked: true }, // X轴开启堆叠
      y: {
        stacked: true, // Y轴开启堆叠
        title: {
          display: true,
          text: '成熟度得分'
        }
      },
    },
  };

  return <Bar options={options} data={chartData} />;
}

关键提示 #

• 所有需要堆叠的数据集必须设置相同的stack值，Chart.js才会将它们堆叠展示。
• 转换数据时要处理项目无对应评估的情况，默认设为0，避免图表数据断裂。
• 数据集颜色可根据需求自定义，示例中用循环色值适配多评估场景。

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