2023 年最受欢迎的几款 React Native 图表库

2,542 阅读3分钟

数据可视化在当前互联网应用中占据着很关键的地位。图表和图形能够以一种简洁易懂的方式呈现复杂的信息。

在 Web 端,通常我们使用 echarts 这个库就能满足绝大部分的可视化图表展示需求。

而在 React Native 的生态圈中,暂时还没有一个 ”集大成者“ 。本文将探索当前React Native 的几个最佳图表库。无论您想要显示简单的折线图、复杂的饼图还是交互式条形图,这些库都提供了必要的工具和组件来使您的数据栩栩如生。大家可以根据自己的需求选择使用。

react-native-echarts

Github Star: 439

这个库时 58 团队提供的一个开源库,从命名来看是励志想要做 RN 版的 echarts。而如同其名,它提供的图表的确也十分丰富,可以算得上是 “集大成者” 了。

它是基于 react-native-svgreact-native-skia 实现,您可以在二者之间自由选择。

image.png

如果您有丰富的图表需求,那么我相信您完全选择 react-native-echarts。

react-native-svg-charts

Github Star: 2.3k

这个库为 IOS 和 eaAndroid 设备提供全面的 SVG 图表支持,同时还为 Web 提供兼容层。

它是基于 react-native-svg 实现的,您可以轻松地在 React Native 应用程序中渲染具有视觉吸引力的图形和图表。

在底层,react-native-svg 利用强大的D3.js库,能够创建 SVG 路径和精确的坐标计算。

目前支持以下类型的图表:

  1. 面积图:

image.png image.png

  1. 条形图:

image.png

image.png

  1. 折线图:

image.png

  1. 饼图

image.png

  1. Y轴

image.png

  1. X 轴

image.png

react-native-chart-kit

Github Star: 2.6k

这个库同样非常强大,它自带 UI 效果非常好,基本上可以不怎么修改直接引用。

image.png

它支持以下图形:

  • 折线图
  • 饼图
  • 条形图
  • 进度条
  • 贝塞尔曲线

最新版本中,它还支持像 github 中的贡献图:

image.png

如果有类似的统计需求,不妨尝试一下这个库。

Victory

Github Star: 10.5k

这个库就有点像另一个 “集大成者” 了。它是一个专为 React Native 设计的用户友好的图表库,为创建交互式且具有视觉吸引力的数据可视化提供了简单而强大的解决方案。

Victory提供了多种图表类型,包括折线图、条形图、散点图等。这些图表类型涵盖了广泛的用例,同时该库还提供工具提示和缩放等交互式功能,增强用户参与度并支持数据探索。使用 Victory,您可以轻松自定义图表元素,例如颜色、标签和轴,以匹配您的应用程序的设计和品牌。

这是官方的图形示例:formidable.com/open-source…

image.png

相信您需要的图形都可以在这里找到。

react-native-gifted-charts

Github Star: 330

这个库最大的优势是使用起来非常简单。它是基于 react-native-svg 以及 react-native-linear-gradient 实现的。因此动效看起来带有一些渐变效果,非常酷炫。

image.png

这是官方的图形示例:gifted-charts.web.app/

CLCchart

Github Star: 316

如果你是一个股票软件的开发者,那么这个库可以完美契合你的需求:

image.png

写在最后

希望这篇文章对于正在纠结于使用哪个 React Native 图表库的你有所帮助~

欢迎加入 React Native 技术交流群,一起畅所欲言吧👇

image.png