React项目中JSON租房数据可视化：图表组件选择与处理求助

一、推荐适合的React图表组件 #

• Recharts：轻量型React图表库，文档直白易懂，对新手友好。完美适配你要做的「不同卧室数租金随时间变化」折线图需求，全程用React组件语法配置，上手快。
• Chart.js + react-chartjs-2：Chart.js是老牌通用图表库，react-chartjs-2是它的React封装，社区资源多、示例丰富，折线图、趋势图这类基础需求完全覆盖，入门门槛低。
• Victory：功能全面的React可视化库，自定义空间大，如果你之后需要更复杂的交互或定制化样式，这个库能满足，但入门难度略高于前两个。

二、数据格式转换方法（核心步骤） #

假设你的原始API数据是类似这样的结构：

[
  {"date": "2024-01", "bedrooms": 1, "rent": 2500},
  {"date": "2024-01", "bedrooms": 2, "rent": 3200},
  {"date": "2024-02", "bedrooms": 1, "rent": 2600},
  {"date": "2024-02", "bedrooms": 2, "rent": 3300}
]

需要转成图表能直接识别的结构，按日期分组，把不同卧室数的租金作为单独字段：

const transformedData = [
  {
    date: "2024-01",
    "1室": 2500,
    "2室": 3200
  },
  {
    date: "2024-02",
    "1室": 2600,
    "2室": 3300
  }
];

可以用数组reduce方法实现转换：

const transformRentData = (rawData) => {
  const grouped = rawData.reduce((acc, item) => {
    const key = item.date;
    if (!acc[key]) {
      acc[key] = { date: key };
    }
    acc[key][`${item.bedrooms}室`] = item.rent;
    return acc;
  }, {});
  return Object.values(grouped);
};

三、Recharts快速实现示例 #

1. 安装依赖：npm install recharts
2. 组件代码：

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { useEffect, useState } from 'react';

export default function RentTrendChart() {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    // 替换为你的API数据获取逻辑
    const rawApiData = [/* 你的原始租房数据 */];
    const transformed = transformRentData(rawApiData);
    setChartData(transformed);
  }, []);

  const transformRentData = (rawData) => {
    const grouped = rawData.reduce((acc, item) => {
      const key = item.date;
      if (!acc[key]) {
        acc[key] = { date: key };
      }
      acc[key][`${item.bedrooms}室`] = item.rent;
      return acc;
    }, {});
    return Object.values(grouped);
  };

  return (
    <LineChart width={800} height={400} data={chartData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" />
      <YAxis label={{ value: '租金', angle: -90, position: 'insideLeft' }} />
      <Tooltip />
      <Legend />
      {/* 动态生成不同卧室数的折线，无需硬编码 */}
      {Object.keys(chartData[0] || {}).filter(key => key !== 'date').map((bedroomType) => (
        <Line key={bedroomType} type="monotone" dataKey={bedroomType} stroke="#8884d8" />
      ))}
    </LineChart>
  );
}

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