在 ReactJS 中使用 Recharts 创建堆叠条形图

如果你需要在 ReactJS 中绘制可视化图表，那么 Recharts 可能是个很好的选择。 Recharts 是一个基于 React 和 D3 的图表库，提供丰富的图表类型和定制选项。

在本教程中，我们将展示如何使用 Recharts 创建一个堆叠条形图，在数据可视化方面为你提供指导。

安装

首先，我们需要安装 Recharts。可以通过 npm 或 yarn 进行安装。

npm install recharts

或者

yarn add recharts

组件

在 src/components 目录下创建一个名为 StackedBarChart.js 的新组件，并在其中包含以下代码：

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

const StackedBarChart = ({ data, colors, keys, xKey, legend }) => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={data}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey={xKey} />
        <YAxis />
        <Tooltip />
        {legend && <Legend />}
        {keys.map((key, index) => (
          <Bar
            key={key}
            dataKey={key}
            stackId="a"
            fill={colors[index]}
            background={{ fill: '#eee' }}
          />
        ))}
      </BarChart>
    </ResponsiveContainer>
  );
};

export default StackedBarChart;

在这个组件中，我们引入了 BarChart，Bar，XAxis，YAxis，CartesianGrid，Tooltip，Legend 和 ResponsiveContainer 函数。这些函数将我们需要的 Recharts 组件添加到我们的应用程序中。

Props

该组件接受一些 Props，你可以根据你的具体需求进行调整。

• data：用于绘制条形图的数据数组。
• colors：一个包含颜色的数组，用于为每个不同的数据系列选择不同的颜色。
• keys：用于指定要绘制的数据系列。
• xKey：用于指定条形图中 x 轴的数据键。
• legend：一个布尔值，指示是否显示图例。默认是 true。

数据

为了演示我们的组件，我们将使用一个简单的示例数据。下面是一个包含许多条形图数据值的数据对象：

const data = [
  {
    month: 'Jan',
    series1: 4000,
    series2: 2400,
    series3: 2400,
  },
  {
    month: 'Feb',
    series1: 3000,
    series2: 1398,
    series3: 2210,
  },
  {
    month: 'Mar',
    series1: 2000,
    series2: 9800,
    series3: 2290,
  },
  ...
];

在这个对象中，我们有几个不同的数据系列：'series1'、'series2'和 'series3'。此外，我们还有一个带有月份的键：'month'。我们将使用这些值创建我们的堆叠条形图。

使用

在我们准备好了组件和数据对象后，我们就可以使用它们来创建我们的图表：

import React from 'react';
import StackedBarChart from './components/StackedBarChart';

function App() {
  const data = [
    {
      month: 'Jan',
      series1: 4000,
      series2: 2400,
      series3: 2400,
    },
    {
      month: 'Feb',
      series1: 3000,
      series2: 1398,
      series3: 2210,
    },
    {
      month: 'Mar',
      series1: 2000,
      series2: 9800,
      series3: 2290,
    },
    ...
  ];

  const colors = ['#0088FE', '#00C49F', '#FFBB28'];
  const keys = ['series1', 'series2', 'series3'];
  const xKey = "month";

  return (
    <div style={{ margin: "0 auto", width: "75%" }}>
      <h2>堆叠条形图</h2>
      <StackedBarChart data={data} colors={colors} keys={keys} xKey={xKey} legend={true} />
    </div>
  );
}

export default App;

在这个示例中，我们将数据项传递给 StackedBarChart 组件，并提供用于突出显示数据系列的颜色数组。我们还将 "series1"、"series2" 和 "series3" 作为“键”的数组提供给“keys”属性，以便仅绘制我们选择的数据系列。

最后，我们指定要在 x 轴上显示的数据键 "xKey"，以及我们是否要显示图例 "legend"。

总结

在本教程中，我们介绍了如何使用 Recharts 在 ReactJS 中创建一个基于数据的堆栈条形图。我们还学习了如何使用组件，如何传递数据和自定义选项，以及如何在 Recharts 中使用一些基本组件。

如果你想了解更多关于 Recharts 和 ReactJS 的内容，可以查看它们的官方文档。祝您在数据可视化方面一切顺利！