使用Recharts展示带时间戳的Firebase数据：柱状图无输出问题求助

你的BarChart没有输出，核心问题是数据格式和组件要求不匹配。

当前ramdata.json的结构是：一个数组包裹着单个对象，对象的键是时间戳，每个时间戳对应一组内存数据。但BarChart需要的是数组中的每个元素直接包含要展示的字段（包括x轴的标识字段），组件无法识别嵌套在时间戳键里的数据。

解决步骤 #

1. 转换数据格式 #

在组件中把原始数据转换成符合要求的结构：把每个时间戳作为数据项的一个字段（比如timestamp），同时展开对应的内存数据。

2. 修改组件配置 #

给XAxis指定dataKey为新增的timestamp字段，让组件能正确识别x轴数据。

修改后的完整代码 #

import sampledata from './ramdata.json';
import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar } from 'recharts';

function App() {
  // 转换数据格式
  const transformedData = Object.entries(sampledata[0]).map(([timestamp, data]) => ({
    timestamp,
    ...data
  }));

  return (
    <div>
      <BarChart width={730} height={250} data={transformedData}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="timestamp" /> {/* 指定x轴字段 */}
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="active_memory" fill="#8884d8" />
        <Bar dataKey="available_memory" fill="#82ca9d" />
      </BarChart>
    </div>
  );
}

export default App;

补充说明 #

• 如果需要把时间戳转换成可读的日期格式，可以在转换数据时处理：

  timestamp: new Date(Number(timestamp)).toLocaleString(),
  

• 确保你已经正确安装并导入了图表库，否则组件也无法正常渲染。

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