React中计算JSON月度数据总和并通过ChartJS展示折线图

核心问题定位 #

只显示5月数据，大概率是日期提取/分组逻辑错误，导致大部分数据未被正确归类到对应月份，仅5月数据的日期解析和分组是正常的。以下是分步排查和修复方案：

第一步：检查日期提取逻辑是否正确 #

首先要确保从Period From/Period To中提取的YYYY-MM格式月份是准确的，这是分组的核心。

错误常见场景：

1. 日期格式不兼容：数据库返回的日期字符串（如DD-MM-YYYY、MM/DD/YYYY）直接用new Date()解析会出错，导致非5月数据的月份提取为NaN-NaN，无法被正常分组。
2. 月份索引错误：使用getMonth()时未加1（该方法返回0-11，对应1-12月），导致月份编号错位。

修复后的日期提取逻辑：

// 示例：处理不同格式的日期字符串，确保输出YYYY-MM格式
const getMonthKey = (dateStr) => {
  // 先尝试ISO格式解析
  const date = new Date(dateStr);
  if (!isNaN(date.getTime())) {
    return date.toISOString().slice(0, 7);
  }
  
  // 如果解析失败，手动处理自定义格式（比如DD-MM-YYYY）
  const [day, month, year] = dateStr.split('-');
  return `${year}-${month.padStart(2, '0')}`;
};

第二步：修复分组汇总逻辑 #

用reduce实现按月累加收入，同时过滤无效数据：

// 假设rawData是你的10万条原始数据数组
const aggregatedData = rawData.reduce((acc, item) => {
  const monthKey = getMonthKey(item['Period From']); // 或根据业务用Period To
  // 跳过无效日期的数据
  if (!monthKey) return acc;
  
  const revenue = Number(item.Revenue) || 0; // 确保收入是数字类型，避免字符串拼接
  if (acc[monthKey]) {
    acc[monthKey] += revenue;
  } else {
    acc[monthKey] = revenue;
  }
  return acc;
}, {});

// 将分组结果转为数组并按月份排序
const sortedMonthlyData = Object.entries(aggregatedData)
  .sort(([a], [b]) => new Date(a) - new Date(b))
  .map(([month, total]) => ({ month, total }));

第三步：检查ChartJS配置是否正确 #

确保图表的标签和数据一一对应，且包含所有月份：

// 在LineChart.jsx中配置ChartJS数据
const chartConfig = {
  type: 'line',
  data: {
    labels: sortedMonthlyData.map(item => item.month), // 所有月份的标签
    datasets: [
      {
        label: '月度总收入',
        data: sortedMonthlyData.map(item => item.total), // 对应月份的总收入
        borderColor: '#2196F3',
        tension: 0.3,
        fill: false
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'category',
        title: { display: true, text: '月份' }
      },
      y: {
        title: { display: true, text: '总收入' },
        beginAtZero: true
      }
    }
  }
};

第四步：性能优化（针对10万条数据） #

10万条数据直接在组件渲染时处理会影响性能，用useMemo缓存处理后的结果：

import { useMemo } from 'react';

// 在组件内部
const sortedMonthlyData = useMemo(() => {
  // 这里放上面的reduce和排序逻辑
}, [rawData]); // 仅当rawData变化时重新计算

快速排查方法 #

1. 在控制台打印aggregatedData，查看是否只有202X-05这一个月份键，若是则说明日期提取逻辑错误。
2. 随机选取一条非5月的数据，调用getMonthKey()打印结果，确认是否返回正确的月份格式。

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