引言
在前端开发中，数据可视化的需求逐渐增多。而一个好用的图表库可以大大减少我们的开发工作量。本文要介绍的就是一个可用于制作环形柱状图（Radial Bar Chart）的 react 组件库 —— react-radial-bar-chart。
本教程旨在为初学者介绍如何使用 react-radial-bar-chart 库，并详细讲解其使用方法。
理论基础
在介绍使用 react-radial-bar-chart 库之前，我们需要先在理论上了解一些环形柱状图的基本概念。
环形柱状图是一种圆环形式呈现的柱状图。通常由多个扇形组成，每个扇形表示一份数据。每个扇形根据数据量的大小来决定其大小和颜色。
react-radial-bar-chart 包安装
react-radial-bar-chart 是一个由 react 和 d3 组成的组件库。在使用之前，需要先安装它。
使用 npm 安装，命令如下：
npm install --save react-radial-bar-chart
如果使用 yarn 可以使用：
yarn add react-radial-bar-chart
具体使用方法
导入 react-radial-bar-chart 库
在我们的项目中，我们需要使用 import 语句将 react-radial-bar-chart 库引入进来，如下所示：
import React from 'react';
import { render } from 'react-dom';
import RadialBarChart from 'react-radial-bar-chart';基础使用
最基本的环形柱状图需要下面的参数：
- data: an array in which each object represents a bar.
一个最简单的例子：我们定义了一个圆环柱的列表，每一个圆环柱有两个属性，具体内容如下：
-- -------------------- ---- -------
----- ---- - -
-
----- -------
------ ---
----- ---------
--
-
----- -------
------ ---
----- ---------
--
-
----- -------
------ ---
----- ---------
--
-
----- -------
------ ---
----- ---------
-
--接下来，我们将这个数据列表传入 RadialBarChart 组件。
-- -------------------- ---- -------
-------
---------------
-----------
-----------
------------
----------------
-----------------
---
-------------------------------
--上面这段代码会在 HTML 所指定的 DOM ID 中渲染一张圆环柱状图。
自定义 Label
RadialBarChart 组件默认为数据映射的值生成标签。但有可能数据本身缺少名字字段，或者想要进一步自定义标签。此时，可以传入自定义的 label 函数，以通过 React 组件来处理每个需要显示的标签。
例如，我们有以下数据：
const data = [
{ value: 30, fill: "#0088FE" },
{ value: 50, fill: "#00C49F" },
{ value: 80, fill: "#FFBB28" },
{ value: 20, fill: "#FF8042" }
];定义一个名为 getLabel 的自定义 Label 函数：
const getLabel = ({ value }) => `${value}%`;该函数将在每个圆环柱中映射出一个 label 字段，其中该字段通过格式化组件 getLabel 中的参数所得。参数 value 就是数据中的值。这个 getLabel 函数会在我们的圆环柱图中呈现出圆环中间的文本信息。
修改我们的代码，结果如下：
-- -------------------- ---- -------
-------
---------------
-----------
-----------
------------
----------------
-----------------
----------------
---
-------------------------------
--这将以环形图的形式显示我们的数据，并在每个环的中心显示该环所表示的值。我们可以看到，我们已经成功地自定义出了中心 label。
注册点击事件
react-radial-bar-chart 同样提供了点击事件的功能，我们可以在用户点击圆环柱时做出相应的响应。
修改后的代码如下：
-- -------------------- ---- -------
----- ------ - -- ---- -- -- -------------------- ----------
-------
---------------
-----------
-----------
------------
----------------
-----------------
----------------
-------------------
---
-------------------------------
--我们可以看到，只要我们点击了圆环柱，就会在浏览器的控制台中获得一条日志。
总结
通过本教程的讲解，我们已经了解了 react-radial-bar-chart 的使用方法。具体包括在项目中导入库、基础使用、自定义 Label 和点击事件。通过本教程的学习，我们可以更加灵活地使用该组件，满足更多的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd5a9