在 ReactJS 中使用 Recharts 创建堆叠面积图

Recharts 是一个基于 React 库的数据可视化库,可以用于创建各种类型的图表和可视化效果。在这篇文章中，我们将学习如何在 ReactJS 中使用 Recharts 创建堆叠面积图。

什么是堆叠面积图？

堆叠面积图是一种可视化方式，用于显示不同系列之间的比较。在这种图表中,每个系列的值都在上一个系列的值之上堆叠。这种图表通常用于显示不同类别或时间段中的趋势。

Recharts 中的堆叠面积图

Recharts 提供了 AreaChart 组件来创建面积图, AreaStack 组件用于创建堆叠面积图。AreaStack 组件可以使用 AreaChart 组件的所有属性，以及一些堆叠面积图特定的属性。

以下是一个使用 Recharts 创建堆叠面积图的示例代码：

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  {
    name: 'Jan',           
    series1: 100,           
    series2: 50,           
    series3: 25,           
  },
  {
    name: 'Feb',
    series1: 120,
    series2: 80,
    series3: 30,
  },
  {
    name: 'Mar',
    series1: 150,
    series2: 100,
    series3: 45,
  },
  {
    name: 'Apr',
    series1: 200,
    series2: 150,
    series3: 60,
  },
  {
    name: 'May',
    series1: 250,
    series2: 200,
    series3: 75,
  },
];

export default function StackedAreaChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}
        margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Area type="monotone" dataKey="series1" stackId="1" stroke="#8884d8" fill="#8884d8" />
        <Area type="monotone" dataKey="series2" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
        <Area type="monotone" dataKey="series3" stackId="1" stroke="#ffc658" fill="#ffc658" />
      </AreaChart>
    </ResponsiveContainer>
  );
}

在这个例子中，我们使用了 AreaChart 组件来创建一个堆叠面积图。我们把数据传递给这个图表，并设置 margin，CartesianGrid，XAxis，YAxis，Tooltip 和 Legend 等属性。

接下来，在 AreaChart 组件中，我们使用了 Area 组件三次来创建三个系列。通过设置 type 属性为 monotone，我们确保渲染是连续的。我们使用 stackId 属性来指定系列所属的堆叠组。

最后，我们将堆叠面积图放在一个 ResponsiveContainer 容器内。这个容器可确保图表在不同设备上的尺寸相同。

结论

在这篇文章中，我们学习了如何使用 Recharts 中的 AreaStack 组件来创建堆叠面积图。我们学习了如何为图表设置属性，并创建了一个简单的样例，可以用作起点来构建更复杂的图表。