19 个在线图表创建工具

在当今世界，人们越来越难以集中注意力。因此，以结构化、趣味性和精心设计的方式呈现信息变得越来越重要，尤其是在复杂的业务应用程序中。在标准电子表格中呈现海量数据以供分析或研究非常不方便。创建不同的图表是我们将要考虑的一个大问题。

图表是 Web 应用呈现数据的重要组成部分。这意味着 JavaScript 图表库不可或缺。人类大脑的编程方式决定了它对视觉数据的理解远胜于其他任何事物。无论数据如何被解释得清晰，良好的可视化数据比直接呈现的数据更具影响力。

公司会根据所呈现的图表、数字和表格制定战略，并经常以此来决定是否抓住商机。选择合适的工具来制定战略至关重要。

但是，如何在琳琅满目的 JavaScript 技术中选择符合你需求的工具呢？如何为你的数据选择合适的图形？它应该付费还是免费？是构建自己的解决方案还是使用现成的工具？

我们将在本指南中尝试涵盖所有这些问题。首先，我们将讨论如何选择合适的工具或库。然后，我们将定义评估工具的标准，最后，比较市场上最受欢迎的解决方案。

如何选择合适的图表库软件？

在选择图表工具时，一切都因人而异，取决于许多标准。因此，在本节中，我们将探讨选择图表绘制工具时应注意的事项。

现在市面上有很多图表库，但哪些才是最好用的呢？这取决于许多因素，例如业务需求、数据类型、图表本身的用途等等。

如果我们需要一些通用的东西来满足我们的需求，一个漂亮的界面和复制/粘贴的代码当然很好。但坦白说，大多数时候我们实际上需要的是一些根据我们用例量身定制的东西。更重要的是，我们需要一个可靠的、可以作为我们构建基础的图表库。

这里有几个因素需要考虑：

• 公司想要创建什么样的图表？饼图、地图、折线图还是条形图？
• 数据集有多大？
• 该应用程序将用于网络、移动设备还是两者？
• SVG 还是 Canvas 库？基于 SVG 的库通常更适合中小型数据集，因为每个元素都是一个唯一的节点，并且存在于 DOM 树中。另一方面，Canvas 的速度非常快。
• 给定库的浏览器支持情况如何？查看你的浏览器市场份额即可了解。
• 您使用哪个 JavaScript 框架？
• 您需要什么样的外观和感觉定制？

请注意，在某些情况下，你可能根本不需要数据可视化库。有时，最好使用原生 JavaScript 从头编写一个。

这是我在互联网上找到的决策图示例。

用于创建图表的顶级库

本文将比较每个 JavaScript 图表库的一些关键因素，包括图表类型、是否为商业或免费以及是否开源。这些优秀的图表库都经过了深入的分析，并结合实际经验，力求达到最佳的比较效果。

Highcharts

Github 开始：8871
许可证：非商业免费，商业付费
价格：免费至 7000 美元
主要依赖项：无依赖
项 网站：https://www.highcharts.com/

HighCharts 是一个基于 SVG 技术的现代图表库。它无需任何插件，并且与所有主流 Web 框架的集成非常简单。

Highcharts 除了简单之外，还与旧版浏览器非常兼容，因此如果您不需要使用高级图表样式来表示数据，则可以选择它。

显著特点：

• 针对响应式设计和触摸设备进行了优化；
• 能够处理大数据；
• 悬停工具提示渲染速度超快；
• 能够注释图表；
• 可以将数据直接从 CSV 文件加载到图表中。

Highcharts 允许您独立于数据配置主题。这样，您就可以为品牌设置一个通用主题，并将其应用于网站上的所有图表。

Highcharts 拥有丰富的文档，涵盖了大多数用例。

HighCharts 已被全球许多大型公司使用，包括 Facebook、IBM、MasterCard 和 StackOverflow。它可能是目前最先进的图表库，但当然，商业使用需要付费。如果价格合理，Highcharts 是一个不错的选择。

Chartist-js

Github 开始：11660
许可证：开源
价格：免费
主要依赖项：无依赖
项 网站：http://gionkunz.github.io/chartist-js/

Chartist 是一个非常现代的基于 SVG 的库。它最大的特点是使用该库制作的图表中带有 SVG 动画。

它拥有坚实的技术基础，并且非常易于实现。只需几分钟，您就可以制作出令人印象深刻的图表，并轻松与任何后端数据源进行交互。Chartist 的配置非常简单，并且可以轻松地使用 Sass 进行自定义。

这个库只有 8 种基本图表类型，可以用来即兴创作更多不同类型的图表。每种图表类型都完全响应式，但过渡效果不如其他图表类型出色。

特征：

• 按标签过滤；单击图例以显示或隐藏图表上的数据；
• 非数字 Y 轴，改为使用标签；
• 通过折线图插值轻松定制。

Chart.js 可视化库完全开源，遵循 MIT 许可证，可供修改、分发和使用。源文件也可在 GitHub 上“fork”。

Chart.js 提供了丰富的文档库，包括安装该库的详细说明。该库可以通过 Bower、NPM、jsDelivr 快速安装，甚至可以从 CDNJS 链接。此外，您还可以直接从 GitHub Repo 下载源文件。

Chartist 是一个非常强大的图表库，但它需要开发人员做更多的工作才能使其看起来正确。

C3.js

Github 开始：8445
许可证：开源
价格：免费
主要依赖项：D3.js
网站：https: //c3js.org/

C3 是一款非常高效的基于 D3 的图表可视化库。C3 库渲染速度快，跨浏览器兼容性好，并且集成非常简单。如果您追求简洁易用，C3 是一个不错的选择。

它还包含有关本质上简单的库的良好文档。

特征：

• 丰富的教程和文档；
• 响应迅速且适合移动设备；
• 已集成时尚的工具提示；
• 可过滤的数据系列。

C3 提供了入门指南，指导如何在项目中设置基本库。

Chartjs

Github 开始：44604
许可证：开源
价格：免费
主要依赖项：Moment.js
网站：https://www.chartjs.org/

Chartjs 是一个基于 HTML5 的 JavaScript 库，用于创建动画、交互式且可自定义的图表和图形。Chart.js 比 HighCharts 轻量级得多，并且提供的选择也相对较少。

Chart.js 的 API 相当简单，且文档齐全。Chart.js 使用 Canvas 而非 SVG。该库维护活跃，并提供一些插件来扩展其功能。

Chart.js 提供 8 种不同的图表类型，用于数据可视化，并带有开箱即用的动画效果。它兼容所有现代浏览器。此外，可以通过配置启用图表的响应式图表行为。

情节

Github 开始：10520
许可证：开源
价格：免费，企业付费
主要依赖项：D3.js，Stack.gl
网站：https://plot.ly/

Plotly 是最常见的库之一。Plotly 是一个非常丰富的库，并且拥有出色的文档，包括每种图表类型的教程。

Plotly.js 自 2015 年起开源，这意味着任何人都可以免费使用。它支持 20 种图表类型，包括 SVG 地图、3D 图表和统计图表。它基于 D3.js 和 stack.gl 构建。

我们提供各种图表和图形类型，外观和风格都非常专业。创建图表只需加载您的信息，并自定义布局、坐标轴、注释和图例即可。

NVD3

Github 开始：6910
许可证：开源
价格：免费，企业付费
主要依赖项：D3.js
网站：http://nvd3.org/

NVD3 也位列最受欢迎的库之列。与上述其他库一样，它基于 D3.js 构建，拥有坚实的技术基础。

它的性能相对较好，并且确实有一些基本的动画，可以为原本相当简单的界面注入一些视觉刺激。数据可以直接从 .json 文件导入，这意味着 NVD3 非常容易与现有的数据 API 解决方案集成。

与此列表中的其他库相比，它看起来相当小，并且许多图表不可用，但大多数常规图形类型都存在。

该可视化库完全开源，遵循 Apache 2.0 许可证。

融合图表

Github 开始：-
许可证：付费
价格：从 497 美元到 9947 美元
主要依赖项：无依赖
项 网站：https://www.fusioncharts.com/

FusionCharts 拥有可能是最全面的图表和地图集合。它提供超过 90 种图表类型和 965 种地图，让您可以立即找到所需的一切。

FusionCharts 支持 JSON 和 XML 数据格式，并支持导出 PNG、JPEG、SVG 或 PDF 格式的图表。他们拥有一系列优秀的商业仪表盘和现场演示，可供您参考。

FusionCharts 的图表和地图兼容所有设备和平台，高度可定制，交互也非常美观。不过，尽管如此，FusionCharts 的价格略高。

DyGraphs

Github 开始：2646
许可证：开源
价格：所有用户免费
主要依赖项：-
网站：http ://dygraphs.com/

DyGraphs 是一个快速、灵活的开源 JavaScript 图表库。它高度可定制，兼容所有主流浏览器（包括 IE8），并且拥有活跃的社区。

特征：

• 线性回归；
• 跨多个图表同步；
• 缩放功能；
• 突出显示的区域。

DyGraphs 非常适合大型和复杂的数据集。

D3.js

Github 开始：86330
许可证：开源
价格：所有用户免费
主要依赖项：-
网站：https://d3js.org/

D3 是一个基于 BSD 许可证发布的开源 JavaScript 库。它提供了大量的图表、图形和其他数据可视化方法。D3 几乎可以满足您以可视化方式呈现各种数据所需的一切。

该网站提供了全面的文档，并提供了示例来帮助您入门和使用该库。

D3 支持所有现代浏览器。它已经在 Firefox、Google Chrome、Safari、Opera、IE9+、Android 和 iOS 等浏览器上进行了测试。

D3.js 有两个主要缺点：学习难度高，并且仅兼容现代浏览器（IE 9+）。只有当你有足够时间学习和掌握它时，才应该选择它。

西格玛图表

Github 开始：86330
许可证：开源
价格：所有用户免费
主要依赖项：无依赖
项 网站：http://sigmajs.org

Sigma.js 基于 Canvas 和 WebGL 构建，拥有公共 API，包含 GitHub 社区贡献的大量插件。Sigma 拥有完全响应式和触控交互功能。它允许开发人员直接将自己的函数添加到脚本中，并精确地按照规范渲染节点和边。

Sigma 提供了丰富的设置，方便您轻松自定义绘图以及与网络的交互。Sigma 是一个渲染引擎，您可以自行添加所需的所有交互功能。公共 API 让您可以修改数据、移动摄像头、刷新渲染、监听事件等。

它最适合需要强大、专用图形绘制工具的开发人员。

莫里斯图表

Github 开始：6930
许可证：开源
价格：所有用户免费
主要依赖项：jQuery
网站：http://morrisjs.github.io/morris.js/

Morris.js 图表库也相当流行。它被广泛应用于许多管理模板中——包括免费版和付费版。Morris 使用的图表注重简洁性和有效性。

该库中有 4 种类型的图表 - 折线图、面积图、条形图和环形图。

Morris 海图提供免费许可证。许可证详情已在网站上提供。此外，网站上还提供了详细的海图文档。

细胞景观

Github 开始：5857
许可证：开源
价格：所有用户免费
主要依赖项：无依赖
项 网站：http://js.cytoscape.org/

Cytoscape.js 是一个用 JS 编写的开源图论库。您可以使用 Cytoscape.js 进行图分析和可视化。

Cytoscape.js 让您能够轻松显示和操作丰富的交互式图形。Cytoscape.js 包含所有开箱即用的手势，包括捏合缩放、框选、平移等等。

Cytoscape.js 也具有图形分析功能。该库包含许多图论中有用的函数。您可以在 Node.js 上以无头模式使用 Cytoscape.js，在终端或 Web 服务器上进行图形分析。

Shutterstock 的人力车

Github 开始：6360
许可证：开源
价格：所有用户免费
主要依赖项：D3.js、jQuery、jsdom
网站：https://tech.shutterstock.com/rickshaw/

Rickshaw 是一个用于创建交互式时间序列图的 JavaScript 工具包。Rickshaw 提供了创建交互式图表所需的元素：渲染器、图例、悬停、范围选择器等。

它基于 d3 底层，因此图表使用标准 SVG 绘制，并使用 CSS 设置样式。您可以使用已知的技术自定义所有内容。

Rickshaw 是免费开源的，遵循 MIT 许可证。由 Shutterstock 公司开发。

CanvasJS 图表

Github 开始：
许可证：付费。学生和非商业用途可免费使用。
价格：149 美元至 4999 美元。
主要依赖项：
网站：https://canvasjs.com/

CanvasJS 是一个响应式 HTML5 图表库，性能卓越，API 简洁易用。它支持 30 种不同的图表类型（包括折线图、柱形图、条形图、面积图、样条图、饼图、圆环图、堆叠图等），所有图表均有详尽的文档。所有图表均包含工具提示、缩放、平移、动画等交互功能。CanvasJS 可以与主流框架（Angular、React 和 jQuery）以及服务器端技术（PHP、Ruby、Python、ASP.Net、Node.JS、Java）集成。

库尔图

Github 开始：-
许可证：所有用户付费
价格：从 350 美元到 1280 美元
主要依赖项：-
网站：https://www.koolchart.com/

KoolChart 是一个基于 HTML5 画布的 JavaScript 图表库。其视觉效果简洁现代。使用画布可以获得更好的性能，但代价是牺牲了基于光栅的绘制方式。

该 API 拥有完善的文档，其中包含每种类型的示例图表。目前提供两个月的试用期以供评估。试用期结束后，需要获得许可。

原始图

Github 开始：6124
许可证：Apache 2.0
价格：免费
主要依赖项：d3.js
网站：https://rawgraphs.io/

RAWGraphs 是一款基于 d3.js 库的开放式 Web 工具，用于创建自定义矢量可视化效果。它由 DensityDesign 研究实验室（米兰理工大学）和 Calibro 开发，并由 ContactLab 负责企业管理。

它支持表格数据（电子表格和逗号分隔值），以及从其他应用程序复制粘贴的文本。基于 SVG 格式，可视化效果可以使用矢量图形应用程序进行编辑以进一步完善，或直接嵌入到网页中。这里有一个示例图库，在深入研究之前可以先浏览一下。

陶查茨

Github 起始：1799
许可证：Apache 2.0
价格：免费
主要依赖项：d3.js
网站：https: //taucharts.com/

TauCharts 是最灵活的 JavaScript 图表库之一。它基于 D3，是一个以数据为中心的 JavaScript 图表库，可以提升数据可视化效果。该库提供了一个声明式接口，可以快速将数据字段映射到可视化属性。其架构允许您构建分面 (facet) 并使用可复用的插件扩展图表行为。

谈到灵活性，TauCharts 让您可以轻松访问他们的 API，从而让用户有机会无缝地映射和可视化数据以获得更多惊人的见解。

任意图表

Github 开始：-
许可证：商业使用付费
价格：从 49 美元到 799 美元不等，可定制价格。非商业使用免费
主要依赖项：-
网站：https://www.anychart.com/

AnyChart 是一个强大、轻量且功能丰富的 JS 图表库，支持 SVG/VML 渲染。它为 Web 开发者提供了创建各种图表的绝佳机会，帮助他们进行数据分析并做出数据驱动的决策。

主要特点：

• 超过 80 种 JS 图表类型，包括基本图表、股票图表、地图以及甘特图和 PERT 图。
• 设置数据的方式有很多种：XML、JSON、CSV、JS API、Google Sheets 和 HTML Table。
• 深入查看图表数据。
• 开箱即用的股票技术分析指标和绘图工具（注释）。
• 可以与 Angular、Qlik、Oracle APEX、React、Elasticsearch、Vue.js、Android、iOS 等集成。

带水印版本免费。如需去除品牌标识或将 AnyChart 用于任何商业用途，则需要购买许可证（49 美元起）。

图表

Github 开始：12230
许可证：MIT
价格：免费
主要依赖项：d3.js
网站：http://recharts.org/en-US/

Recharts 提供了一组模块化图表组件，并允许您将这些组件混合在一起，轻松构建组合线和条形图等。

它是迄今为止最受欢迎的库。它在 Github 上拥有超过 11000 个 star，同时还有大量（迄今为止 600 个）未解决的问题。

文档相当详尽，但有些部分缺乏细节。你可以在 Recharts 网站上找到大量示例，这些示例可以作为构建你自己的图表的良好起点。

有点令人担忧的是 GitHub 上有大量未解决的问题。这些问题可能并不重要，但创建者似乎很少来解答。所以，如果你遇到困难，请做好深入研究代码库的准备。

结论

由于图表是我们现在经常需要实现的功能，因此有许多开源图表库可供我们选择也就不足为奇了。

我们上面提到的所有库都具有非常好的浏览器兼容性，并且为使用旧版浏览器的用户提供了回退功能。基于 D3 构建的库虽然基础扎实，但就我个人而言，从美观度方面来看，它们略显逊色。

对于拥有海量数据集的企业，或高度依赖数据分析的小型企业来说，FusionCharts、GoogleCharts、Dygraphs 或 D3 衍生产品等库可能更适合。Highcharts 和 FusionCharts 这两个商业产品都是成熟的库，能够很好地满足大多数用例的需求。它们对大型数据集（>10 万个数据点）的支持程度各不相同，并且支持各种图表。如果您需要渲染特定类型的图表，那么选择范围可能只会缩小到其中一种。

如果您只需要一些小巧快捷的工具，Morris.js 或 Chart.js 可能更适合您。对于图表和网络，Cytoscape 或 Sigma.js 可能是最佳选择。

如果您想要使用免费开源库，请使用 Chart.js。它对于常见用例来说极其简单易用。如果您需要对渲染进行更多控制，那么您可以考虑 Chartist。

为了选择最适合您独特需求的 JS 图表解决方案，我建议您根据上面列出的几个库测试您自己的数据，以确保完美适合您当前和未来的项目。

PS：我们准备了一个表格，通过npm下载库来展示它们的受欢迎程度。我们发现最受欢迎的是 d3、chart.js 和 Highcharts。

关于 Flatlogic
Flatlogic 开发管理仪表板模板和React Native 模板。我们是白俄罗斯和立陶宛排名前 20 的 Web 开发公司之一。在过去的 6 年里，我们成功为小型初创公司和大型企业完成了30 多个大型项目。作为一个团队，我们始终渴望为客户提供帮助。

您可能还喜欢这些文章：

顶级日期选择器 JavaScript 插件和库
顶级 React Native UI 组件套件
带有 Node.JS 后端的 5 大管理模板

最初发布于flatlogic.com — React、Angular、Vue、Bootstrap 和 React Native 模板和主题。

文本来源：19 个在线图表创建工具