Recharts是基于React和D3构建的可组合图表库
Recharts
简介
Recharts 是一个重新定义的图表库，它基于 React 和 D3 构建。
该库的主要目标是帮助您轻松地在 React 应用程序中编写图表。Recharts 的主要原则如下：
- 使用 React 组件轻松部署。
- 原生 SVG 支持，轻量级且依赖性极低。
- 声明式组件。
文档位于 recharts.github.io 和我们的 storybook。
另请参阅 wiki。
所有开发均在 main 分支上完成。当前最新版本和 Storybook 文档反映了 release 分支上的内容。
示例
jsx
<LineChart width={400} height={400} data={data}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
<Line type="monotone" dataKey="pv" stroke="#387908" />
</LineChart>Recharts 的所有组件都清晰地分离。LineChart 由 x 轴、工具提示、网格和行项目组成，每个组件都是独立的 React 组件。组件的清晰分离和组合是 Recharts 遵循的原则之一。
安装
npm
NPM 是开始使用 Recharts 最简单、最快捷的方式。它也是构建单页应用程序 (SPA) 的推荐安装方法。它与 CommonJS 模块打包器（例如 Webpack）完美兼容。
sh
# 最新稳定版
$ npm install recharts react-isreact-is 需要与您安装的 react 包的版本匹配。
umd
UMD 版本也可在 unpkg.com 上获取：
html
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>然后，您可以在 window.Recharts 上找到该库。
贡献
Recharts 是开源的。如果您想为该项目做出贡献，请阅读 CONTRIBUTING.md
了解如何为项目做出贡献，并阅读 DEVELOPING.md 来设置您的开发环境。
许可证
MIT
关于项目
Recharts是使用 React 和 D3 构建的重新定义图表库，只需使用 React 组件进行部署。
MIT
Typescript
26,268
1849
180
2015-08-07
2025-11-27