✨2021 年热门 React 图表库

React-chartjs-2

图表

Recharts 是一个使用React和D3构建的重新定义的图表库。

该库的主要目的是帮助你轻松地在 React 应用程序中编写图表。Recharts 的主要原理如下：

1. 只需使用 React 组件进行部署。
2. 原生SVG 支持，轻量级，仅依赖于一些 D3 子模块。
3. 声明性组件，图表的组件纯粹是展示性的。

Recharts 的所有组件都清晰地分离。lineChart 由 x 轴、工具提示、网格和行项目组成，每个组件都是一个独立的 React 组件。组件的清晰分离和组合是 Recharts 遵循的原则之一。

维斯克斯

visx 是可重复使用的低级可视化组件的集合。visx 结合了 d3 的强大功能来生成可视化效果，并利用 react 的优势来更新 DOM。

欲了解更多使用示例visx，请查看图库。

尼沃

nivo提供增强的 React 组件来轻松构建数据可视化应用程序，它建立在 d3 之上。

目前已经存在多个用于 React d3 集成的库，但只有少数提供服务器端渲染能力和完全声明性的图表。

安装

为了使用 nivo，您必须安装该@nivo/core软件包，然后@nivo根据您希望使用的图表选择一些范围内的软件包：

yarn add @nivo/core @nivo/bar

特征

• 高度可定制
• 运动/过渡，由react-motion提供支持
• 组件游乐场
• 详尽的文档
• 同构渲染
• SVG图表
• HTML 图表
• 画布图表
• 服务器端渲染API
• SVG 图案
• 渐变
• 响应式图表

billboard.js

billboard.js 是一个可重复使用、界面简单的 JavaScript 图表库，基于D3.js。

“广告牌”这个名字来源于billboard chart大家都知道的著名事物。

• 为什么我们决定启动 billboard.js？

支持的图表类型

下载和安装

直接从 repo 下载 dist 文件或通过 npm 安装。

用于开发（未压缩）

您可以下载未压缩的文件进行开发

最新的

• https://naver.github.io/billboard.js/release/latest/dist/billboard.js
• https://naver.github.io/billboard.js/release/latest/dist/billboard.css

具体版本

• https://naver.github.io/billboard.js/release/[版本]/dist/billboard.js
• https://naver.github.io/billboard.js/release/[版本]/dist/billboard.css

反应-vis

演示|文档

可组合可视化系统

概述

用于呈现常见数据可视化图表的反应组件集合，例如折线图/面积图/条形图、热图、散点图、等高线图、六边形热图、饼图和环形图、旭日图、雷达图、平行坐标和树形图。

一些值得注意的特点：

• 简单。react-vis不需要任何有关数据可视化库的深入知识即可开始构建您的第一个可视化。
• 灵活性。react-vis为不同的图表提供一组基本构建块。例如，独立的 X 轴和 Y 轴组件。这为需要图表布局的应用程序提供了高级控制。
• 易于使用。该库提供了一组默认值，可以通过自定义用户的设置进行覆盖。
• 与 React 集成。react-vis支持 React 的生命周期并且不会创建不必要的节点。

React-chartjs-2

Chart.js 2.0 和 3.0 的 React 包装器，最受欢迎的图表库 📊

Chart.js的 React 包装器

示例

直播：reactchartjs.github.io/react-chartjs-2

请参阅这些示例以了解更多信息

更多 React 资源❤️精选的精彩 React 框架、库和组件列表。