起步

1. 选择图表类型

传入简单的js对象(通常是一个数组)生成简单的图表。

2. 添加需要的组件

例如, LineChart 可以添加组件 XAxis, YAxis, Legend, CartesianGrid, 等等。

3. 调整部分组件的配置

例如,可以调整 margin-right 的值来保证有足够的空间展示 x 轴最右侧的刻度,也可以调整网格的线型。

4. 丰富交互

添加 Tooltip 组件就能很简单的实现浮窗展示提示信息的功能。

5. 实现自定义功能

例如,你可以通过传入自定义的刻度函数来实现定制化的功能,当然其他的组件也支持类似的功能,比如 Bar 组件也能接收自定义的 shape 组件或者 shape 函数。

Recharts devtools

In all examples on this website, you will see the use of Recharts Devtools component: import { RechartsDevtools } from '@recharts/devtools';. Recharts devtools are the integration that enables the hook inspector. You can access the hook inspector using the dropdown in toolbar. That way, you can see a preview of what Recharts hooks are returning.

You can choose to include Recharts devtools in your own projects, but it is not required to use Recharts. It is only there to help you debug and understand your charts better during development. This component is entirely optional, feel free to erase it from the examples, your charts will continue working the same.