可在 React 应用中用于有效数据可视化的图表集合

反应图

漂亮的 React 图表

反应流

DHTMLX 图表

联合 JS+

GoJS

同步融合

jsPlumb

最后的想法

React 是一个备受追捧的 JavaScript 框架，用于创建动态 Web 应用，它彻底改变了开发人员构建交互式 UI 的方式。无论您是在开发数据可视化仪表板、人力资源管理系统还是医院管理平台，集成图表都可以极大地提升用户体验。

在本文中，我整理了一份图表库列表，您可以测试并集成到您的项目中。在这里，您可以找到基于 React 的开源工具包，以及商业 JavaScript 解决方案，并附有详尽的 React 集成指南和演示。

欢迎在下面的评论区分享你使用上述库的经验，或提出全新的解决方案。让我们一起创建一个真正实用的库合集！

反应图

React-diagrams 库旨在可视化流程图和面向过程的图表。它完全使用 TypeScript 和 React 编写，秉承 HTML 优先的理念。换句话说，它为用户提供了动态 HTML 节点，允许他们手动嵌入不同的控件，包括输入字段和下拉菜单。

该库是开源的，因此可以扩展、重新连接并嵌入到根本不同的软件中，以满足您的项目需求。

漂亮的 React 图表

beautiful-react-diagram是一个开源的 React 组件集合，用于构建基本图表。该库为每个组件提供了多个渲染器，可以使用 CSS 变量设置样式，也可以通过自定义变量移除。

它还附带了开发团队添加的一组 React hooks，以帮助用户加快开发过程。该集合包括回调、引用、事件和组件的生命周期。

反应流

React Flow是一个流行的库（在 GitHub 上拥有 17.6K 个 star），用于创建基于节点的交互式图表、思维导图、流程图和其他类型的图表。它支持选择和拖动多个节点和边、缩放和平移。

为用户提供对嵌套节点渲染的内置支持。该库仅显示视口中的节点以及已更改的节点。它还包含 3 个插件组件，用于修改背景、添加交互式小地图以及附加带有缩放控件的面板。

该库在非商业项目中免费使用。不过，用户可以选择付费的专业版订阅，每月 129 欧元起，从而保持该库在 MIT 许可证下运行和维护。订阅 React Flow Pro 后，用户还可以访问一些专属服务，例如额外的图表示例、个性化技术支持以及优先的 Bug 报告。

DHTMLX 图表

DHTMLX 的JavaScript 图表库允许将交互式图表和组织结构图集成到 Web 应用程序中，包括使用 React 框架构建的应用程序。它拥有直观的用户界面，支持轻松的拖放操作、缩放和滚动，是创建流程图、组织结构图、思维导图、泳道图和混合图表的绝佳选择。

DHTMLX 内置 30 多种预定义形状和连接器。此外，您还可以使用 HTML 自由添加自定义元素，并添加图像、图标和文本数据。它还提供两种智能算法，可自动以径向或正交模式排列图表形状。

您可能会觉得其中一项实用功能是它提供了 3 个实时编辑器，无需编写代码即可绘制图表、组织结构图和思维导图。这些编辑器支持处理图表，并通过可调整的侧面板动态调整其外观。

DHTMLX Diagram 支持将数据导出为 JSON、PNG 和 PDF 格式。年度许可证提供一年的官方技术支持和永久发行权，个人开发者起价为 599 美元。

联合 JS+

JointJS+是一个 JavaScript 库，您可以将其集成到 React 应用中，用于可视化所需的数据集。它提供了一组标准形状，例如矩形或圆形，以及用于业务流程建模 (BPMN) 和价值流映射 (VSM) 等的附加节点。此外，用户还可以从头开始使用 HTML 内容创建自定义 SVG 形状。

该库提供了许多内置功能，方便用户处理形状，包括拖放支持、内联文本编辑和灵活的连接器行为。此外，它还允许用户借助网格、堆栈、力导向和树形布局自动排列元素。

JointJS+ 支持与第三方库集成。例如，它可以与开源 Dagre 和 Graphlib JavaScript 库兼容。在导出服务方面，JointJS+ 图表可以导出为 PNG、PDF、SVG 和 JPEG 格式。

JointJS+ 许可证起价为每位开发者 2,990 美元，适用于商业用途。它提供 40 多个图表元素、150 多个预建演示以及基础技术支持。高级技术支持需额外付费。

GoJS

GoJS 是一个用于实现交互式图表的 JavaScript/Typescript 库。它包含复杂的节点、连接器和组，以及可自定义的模板和布局，因此您可以轻松构建任何复杂程度的图表。

该库提供了一个ReactDiagram 组件，可以顺利集成到基于 React 的应用程序中。

GoJS 提供了各种便捷的功能，包括拖放、复制粘贴、内联编辑、撤消/重做和自动布局。它还提供了 150 个交互式示例，帮助开发人员开始使用流程图、思维导图、组织结构图、BPMN、状态图等图表类型。

许可计划取决于用户数量。例如，个人许可证的价格为 3,495 美元，包含 1 年技术支持和 3 年分销服务。

同步融合

Syncfusion React Diagram 组件支持通过代码或可视化界面构建流程图、组织结构图、思维导图和 BPMN 图表。与其他商业图表库一样，它具有一系列用户友好的功能，包括选择和拖动多个形状、交互式编辑以及 6 种不同的节点自动排列模式。

Syncfusion 提供了一系列调色板，其中包含一组可重复使用的节点和连接器，用户可以将它们拖放到图表中。此外，它还允许添加自定义形状或创建节点 UI 模板来修改外观，并确保您的图表符合项目要求。

借助序列化功能，您可以根据需要以 JSON 格式保存和加载图表状态。此外，您还可以将图表导出为 PNG、JPEG、SVG 和 BMP 格式。

年度订阅起价为 4,740 美元，适用于最多 5 名开发人员的小型团队。它包含 24 小时官方支持和无限次的 Bug 请求，并且会自动续订，直到您取消为止。

jsPlumb

jsPlumb 图表库提供了一组现成的形状和连接器，用于创建交互式流程图、聊天机器人、组织结构图和其他架构。为了在 React 应用中绘制图表，jsPlumb 工具包提供了多个组件，可将该库集成到现有的 React 项目中。

通过该工具包，您将获得标准但有用的 UI 功能，包括拖放、缩放、平移、撤消/重做和布局。

jsPlumb 项目有一个开源社区版本。但是，如果您打算将 jsPlumb 用于商业用途并希望获得其全部功能，则可以选择 Toolkit 版本，起价为每位开发人员 990 美元。

最后的想法

React 应用的精选图表库提供了强大的功能集，可简化数据可视化、提升用户体验并提升视觉吸引力。您可以选择最适合您项目的库，并使用详尽的指南和实例进行集成。