React中Recharts图表的应用与研究

时间：2024-05-04

柳海燕

(苏州工业园区职业技术学院，江苏苏州 215123)

0 引言

React是Facebook于2013年开源的用于构建用户界面的框架，现在随着React可以使用Node进行服务器渲染以及使用React Native开发原生移动应用功能的丰富，使得它现在成为Web开发的主流工具之一。

Recharts是2016年阿里巴巴前端团队开发的一款可视化组件库，用React进行设计，重新定义了组合与配置方式，官网为http://recharts.org。最初为了国际化发展官方只提供了英文文档，所以，国内用户数量增长相比国外慢很多。大部分同行还是使用百度的Echarts进行数据展示，崔蓬[1]在2019年探索了基于ECharts平台的可视化开发方法。当然，针对不同的语言与开发环境，也有其他不同的数据可视化方法。比如，寇国钊等[2]在2019年介绍了基于Java技术的开源动态图表开发组件JFreeChart。贾丽娟等[3]在2019年借助Python强大的数据处理和分析技术，将数据转化为PyEcharts组件接口参数，实现由数据到可视化图表的转换。但由于大小、语言、显示问题，上述都不是React框架的最佳选择。

Recharts当前包含了中文、英文两种文档，在方便国际化的同时，也友好地满足了本土化的需求。除了阿里指数、阿里数据两个忠实用户外，还有很多外国公司，如Fyndiq，Ahrefs等都在使用，相信随着React用户数量的增长，Recharts的应用前景也越来越广阔。本文尝试在React框架中引入Recharts进行数据可视化显示。

1 Recharts安装与使用

1.1 安装

官方推荐使用npm的方式进行安装，能更好地和CommonJS打包工具配合使用，命令为$ npm install recharts。

在实践的过程中，npm更新会带来版本问题。由于Yarn是Facebook发布的一款取代npm的管理工具，Rechats是基于React开发的，所以，笔者推荐可以尝试用yarn安装，安装命令为 yarn add recharts。安装成功后，会显示Recharts的当前版本信息。

1.2 使用

首先，要选择所需要的图表类型，当前Recharts提供的图表有AreaChart，BarChart，LineChart等11种类型，用户可根据自己的应用需要进行选择。其次，通过import添加所需要的组件。最后，根据组件属性来使用组件进行显示，甚至自定义组件，来实现定制化的功能。

2 React中使用Recharts定制化显示数据时遇到的问题

2.1 Recharts中组件属性使用

根据所开发应用的需要，采用Recharts中PieChart图表类型来显示数据。用到了PieChart的子组件Pie和Pie的子组件Cell，通过其fill属性来传递数据项对应子节点的配置。通过Pie组件的data属性来存放源数据，通过Pie组件的label属性来展示图形上的文本标签。当然，所需组件事先需要通过import语句来引入。

2.2 用户自定义Label

通过Pie组件的label属性来展示图形上的文本标签，只不过，label的值写成一个函数renderLabel，用该函数来渲染自定义的文本标签。图形显示部分主要源代码如下：

data={visitList}

dataKey="value"

nameKey="label"

cx={200}

cy={200}

labelLine={false}

label={this.renderLabel}

fill="#8884d8"

{visitList.map((entry, index) => )}

可以看到，此时，Pie的label属性就是前面自定义的函数renderLabel，使得图像按照需要进行内容显示。

2.3 React路由

React通过路由库React-Router，管理URL，实现组件的切换和状态的变化。在本应用中，通过Route来指定路径对应的组件，此统计显示的代码为。当第一次单击此路由对应的菜单时，图表正常显示，如图1所示。

图1 正常显示的图表

当单击图中其他菜单，比如，“访问申请”“权限管理”后，再次单击“申请统计”菜单时，Pie组件的label并不显示，只有图形，没有图形上的标注文字。因为图表是按照份额计算了之后正常显示的，只是没有上面的标注。当尝试刷新页面时，数据又能正常显示。

3 解决方案

3.1 解决思路

既然Recharts只是负责根据数据绘制图形，且已经绘制完成，Recharts的label属性在刷新之后也能够显示文本，没有多余的属性来改变这一切，那就从React的角度来尝试解决这一问题。

3.2 方案一：forceRefresh的应用

既然每次强制刷新都可以使得数据正常显示，那么可以在React的所有路由组件共用的底层接口组件Router上使用其forceRefresh属性，因为Router是路由规则制定的最外层容器，所以，每次单击菜单链接时，都会强制刷新，图表每次可以正常显示。

虽然解决了Recharts图表显示问题，但代价较大。其他所有路由都会受到强制刷新的牵连，所以，牺牲了应用程序执行效率。

3.3 方案二：key的应用

为了弥补方案一的不足，考虑不让所有的路由强制更新，每次只有单击 “申请统计”菜单所需路由的时候再强制刷新。这时，可以利用React中极其特殊的key属性，虽然它不是给开发者用的，是给React自己使用的，但根据相同key的组件，React认为是同一个组件的特点，如果render显示图表时候，发现key不同了，那么每项都会重新销毁然后重新创建，性能开销要小很多。

于是，通过随机函数随机生成key的值，每次调用时key值不同，React就会重新渲染页面，图表确实可以正常显示，且性能开销比方案一小很多。