React搭配好用的图表模块Recharts

最新推荐文章于 2024-07-29 15:45:30 发布

「已注销」

最新推荐文章于 2024-07-29 15:45:30 发布

阅读量3.1k

点赞数

分类专栏： React javascript 前端 html web 文章标签： React Recharts Javascript web前端

本文链接：https://blog.csdn.net/lockey23/article/details/88599781

版权

本文介绍了如何在React应用中使用Recharts库来绘制统计和分析图表。文章提供了一个结合条形图和线型图的Demo，展示了Recharts的基本用法，并推荐了一个包含多种图表主题的资源网站。

摘要由CSDN通过智能技术生成

如果你正在寻找一个图表库||插件||模块来为你的React应用绘制一些统计||分析图表，那么本文可能会给你一些解决方法，并且你会看到一个本人正在使用的插件效果示例。

福利推荐：一个拥有多个10+主题的网站，such as：Top 10+ React Graph Chart Libraries with Demo

正题：Recharts, 基于 React 的组合式图表

基本的使用方法就不多说了，官网中英文文档都有，下面上Demo（此类图表本人未找到官网示例）。

在这里插入图片描述
左侧（条形图）是数量指标，右侧（线型图）是百分比。

接下来上代码吧：

//data

const data = [
  {stage: 'original_driver', vol: 20000, percentage: 100.0},
  {stage: 'enriched_driver', vol: 17000, percentage: 65.0},
  {stage: 'madmen_all', vol: 20000, percentage: 90.0}
]

...
import {
  ComposedChart, Line, Bar, XAxis, YAxis, Carte