在 ReactJS 中使用 Recharts 创建径向条形图

Recharts 是一个基于 React 和 D3 的图表库，它提供了许多种类的图表，其中包括径向条形图。本文将介绍如何使用 Recharts 创建一个径向条形图。

安装

使用 npm 安装 Recharts：

npm install recharts

创建径向条形图

首先，需要导入需要使用的组件：

import { RadialBarChart, RadialBar, Legend } from 'recharts';

然后，我们需要一些数据来填充图表。这个数据应该是一个包含对象的数组，每个对象表示一个条形图。我们在这里创建一个简单的示例数据：

const data = [
  {
    name: 'A',
    uv: 31.47,
    pv: 2400,
    fill: '#8884d8',
  },
  {
    name: 'B',
    uv: 26.69,
    pv: 4567,
    fill: '#83a6ed',
  },
  {
    name: 'C',
    uv: 15.69,
    pv: 1398,
    fill: '#8dd1e1',
  },
  {
    name: 'D',
    uv: 8.22,
    pv: 9800,
    fill: '#82ca9d',
  },
  {
    name: 'E',
    uv: 8.63,
    pv: 3908,
    fill: '#a4de6c',
  },
  {
    name: 'F',
    uv: 2.63,
    pv: 4800,
    fill: '#d0ed57',
  },
  {
    name: 'G',
    uv: 6.67,
    pv: 4800,
    fill: '#ffc658',
  },
];

这个数据包含了七个对象，每个对象都包含了 name、uv、pv 和 fill 四个属性。name 表示条形图的名称，uv 表示条形图的值，pv 是图表中不显示的一个额外值，fill 是条形图的填充颜色。

接下来，我们创建一个 RadialBarChart，并将数据作为 props 传递进去：

<RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data}>
  <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey="uv" />
  <Legend iconSize={10} width={120} height={140} layout="vertical" verticalAlign="middle" align="right" />
</RadialBarChart>

对于 RadialBarChart，我们需要设置其宽度和高度，cx 和 cy 属性表示圆心的位置，innerRadius 和 outerRadius 属性表示内外半径以确定圆环的宽度和位置，barSize 属性表示每个条形图的宽度。

对于 RadialBar，我们设置了一些属性以自定义标签的位置和颜色。

最后，我们加入了一个图例，以便解释不同的条形图。

完整代码示例

import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  {
    name: 'A',
    uv: 31.47,
    pv: 2400,
    fill: '#8884d8',
  },
  {
    name: 'B',
    uv: 26.69,
    pv: 4567,
    fill: '#83a6ed',
  },
  {
    name: 'C',
    uv: 15.69,
    pv: 1398,
    fill: '#8dd1e1',
  },
  {
    name: 'D',
    uv: 8.22,
    pv: 9800,
    fill: '#82ca9d',
  },
  {
    name: 'E',
    uv: 8.63,
    pv: 3908,
    fill: '#a4de6c',
  },
  {
    name: 'F',
    uv: 2.63,
    pv: 4800,
    fill: '#d0ed57',
  },
  {
    name: 'G',
    uv: 6.67,
    pv: 4800,
    fill: '#ffc658',
  },
];

const App = () => {
  return (
    <RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data}>
      <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey="uv" />
      <Legend iconSize={10} width={120} height={140} layout="vertical" verticalAlign="middle" align="right" />
    </RadialBarChart>
  );
};

export default App;

结论

在 Recharts 中创建径向条形图非常容易。只需导入所需的组件，提供数据，然后传递一些 props，即可创建漂亮的图表。这种图表通常用于比较不同项目之间的各个度量标准，例如销售量，市场份额等。