前言
当今世界上，数据围绕着我们的生活、工作和决策。数据可视化是一个优秀的将数据有效传达给用户的方式。为了实现数据可视化功能，我们可以使用 Rechartjs 这个可重用的图表库。
什么是 Rechartjs？
Rechartjs 是一个基于 React 和 D3 库的图表库，它非常适合开发人员快速构建数据可视化应用程序。 Rechartjs 提供了一系列的图表种类，使开发人员可以将数据可视化为折线图、柱状图、散点图、饼图等。
如何安装 Rechartjs？
要使用 Rechartjs，您需要有 React、D3 和 Rechartjs的 npm 包。在你的项目中安装这些包。这里是一个简单的安装步骤:
安装 React
在您的项目根目录下运行以下命令：
npm install react --save
安装 D3
在您的项目根目录下运行以下命令：
npm install d3 --save
安装 Rechartjs
在您的项目根目录下运行以下命令：
npm install recharts --save
如何使用 Rechartjs？
现在，您已经安装了 React、D3 和 Rechartjs，您可以使用 Rechartjs 构建可重用的图表。让我们看几个示例来理解这一过程。
折线图
Rechartjs 允许您轻松地构建折线图。以下是一个完整的 Rechartjs 折线图代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----- ------ ------ -------------- -------- ------- ------------------- - ---- -----------
----- ---- - -
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
--
----- ----------- ------- --------------- -
-------- -
------ -
-------------------- ------------ --------------
---------- ----------- --------- ---- -- ------ --- ----- --- ------- - ---
------ -------------- --
------ --
-------------- ------------------ -- --
-------- --
------- --
----- --------------- --------------- ---------------- --
------------
----------------------
--
-
-
------ ------- ------------在这个例子中，我们可以看到在 render 函数中有一个响应式子容器 ResponsiveContainer，它会根据容器的大小自适应图表的大小。在 ResponsiveContainer 中，我们定义了使用 LineChart 组件来创建一个折线图。我们使用 XAxis 和 YAxis 组件来定义 X 和 Y 轴。 我们使用 CartesianGrid 组件定义网格线，使用 Tooltip 组件定义鼠标悬停时的信息提示框，和使用 Legend 组件定义图例。
柱状图
Rechartjs 也使构建柱状图变得非常容易。以下是一个完整的 Rechartjs 柱状图代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ---- ------ ------ -------------- -------- ------- ------------------- - ---- -----------
----- ---- - -
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
------ ----- --- ------ ------
--
----- ---------- ------- --------------- -
-------- -
------ -
-------------------- ------------ --------------
--------- ----------- --------- ---- --- ------ --- ----- -- ------- - ---
------ -------------- --
------ --
-------------- ------------------ -- --
-------- --
------- --
---- --------------- -------------- --
-----------
----------------------
--
-
-
------ ------- -----------在这个例子中，在 render 函数中同样有一个响应式子容器 ResponsiveContainer。在 ResponsiveContainer 中，我们定义了使用 BarChart 组件来创建一个柱状图，并使用 XAxis 和 YAxis 组件来定义 X 和 Y 轴。 我们使用 CartesianGrid 组件定义网格线，使用 Tooltip 组件定义鼠标悬停时的信息提示框，和使用 Legend 组件定义图例。
饼图
Rechartjs 构建饼图是同样简单的。以下是一个完整的 Rechartjs 饼图代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ---- -------- ----- ------------------- - ---- -----------
----- ---- - -
- ----- ----- --- ------ --- --
- ----- ----- --- ------ --- --
- ----- ----- --- ------ --- --
- ----- ----- --- ------ --- --
- ----- ----- --- ------ --- --
- ----- ----- --- ------ --- --
--
----- ------ - ----------- ---------- ---------- ---------- ---------- -----------
----- ---------- ------- --------------- -
-------- -
------ -
-------------------- ------------ --------------
----------
---- ----------- --------------- -------------- -------- -------- ---------------- ---------------
-
---------------- ------ -- ----- --------------------- ------------------ - --------------- ---
-
------
-------- --
-----------
----------------------
--
-
-
------ ------- -----------在这个例子中，在 render 函数中同样有一个响应式子容器 ResponsiveContainer。在 ResponsiveContainer 中，我们定义了使用 PieChart 组件来创建一个饼图，并使用 Pie 组件来创建每一块。
总结
我们看到，使用 Rechartjs 可以非常轻松地构建可高度定制的响应式图表。使用 React 和 D3 库以及令人愉悦的 React 组件来构建可重用的图表是一种令人兴奋的方式。在本文中，我们介绍了 Rechartjs的安装，以及如何使用 Rechartjs 搭建折线图、柱状图和饼图。希望这篇文章能对您学习和掌握 Rechartjs 提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6dc6