2019年最好的JavaScript图表库

作者 | arthur puszynski

来源 | Medium

编辑 | 代码医生团队

首先，简要介绍一下：

随着数据收集和使用持续呈指数级增长，对这些数据进行可视化的需求变得越来越重要。开发人员寻求将数百万个数据库记录整合到美丽的图表和仪表板中，人类可以快速直观地解释这些记录。

数据可视化技术在过去十年中不断改进，现在消费者可以使用许多高级图表库。在21世纪初期，图表生成由服务器端图像位图图表主导。Flash和Silverlight等插件提供了更具交互性的图表体验，但下载速度，电池寿命和系统资源都很重要。

随着移动和平板电脑使用量的激增，主要平台不再支持插件，开发人员不得不转向可以在任何地方运行的开放客户端技术。与此同时，高分辨率屏幕的出现以及通过触摸手势进行更常见的缩放，使分辨率独立的矢量图表成为最前沿。

进入当前由JavaScript和SVG（可缩放矢量图形）主导的数据可视化时代。图表现在可以在所有浏览器上运行，无需特殊插件，支持交互性和动画，即使在最高分辨率的设备上也能看起来很清晰。回顾了50多个可视化库，这9个产品脱颖而出：

D3.js

https://d3js.org/

D3.js是一个非常广泛和强大的图形JavaScript库。它允许您将任意数据绑定到文档对象模型（DOM），然后将数据驱动的转换应用于文档。

D3远远超出了典型的图表库，包括许多其他较小的技术模块，如轴，颜色，层次结构，轮廓，缓动，多边形等。所有这些都使得学习曲线陡峭。

尝试创建简单的图表可能很复杂。需要明确定义包括轴和其他图表项在内的所有元素。许多示例显示了如何使用CSS来设置图表元素的样式。没有基于图表的功能自动应用。如果你想进入杂草并利用创造力来完全控制每一个元素，那么它是最好的选择。为了满足数据可视化项目的要求，它可能不是从头开始的最佳选择。

D3.js可以是图表库的构建块。开发人员使用D3使其更容易使用消耗它的图表解决方案，例如NVD3。

D3.js是开源的，可以免费使用。

JSCharting

https://jscharting.com/

JSCharting图表库支持大量图表类型，包括地图，甘特图，股票和其他通常需要单独库使用的图表类型。它包括所有世界国家的内置地图和SVG图标库。一套独立的微图表可以在任何图表标签或页面上的任何div元素中呈现。还包括UI控件（UiItems），允许更丰富的交互式图表。实时控制数据或可视化变量非常简单，图表可以导出为SVG，PNG，PDF和JPG格式。

图库分为图表类型和要素样本。图表样式经过抛光处理，产生了一些干净的图表。整体视觉效果提供了清晰而专业的图表体验。

包含的示例使用配置对象来自定义图表。创建和控制图表类型的设置非常易于使用。指定更复杂的图表类型需要很少的属性设置，而JSCharting具有强大的动态默认值，这意味着它会尝试自动为场景选择最佳设置。

该文档包含许多教程和全面的API属性描述。许多属性包括示例用法和示例链接。

JSCharting可免费用于非商业和个人用途，并提供商业许可选项，包括所有图表类型和产品，只需一次性费用。

Highcharts

https://www.highcharts.com/

Highcharts是一个流行的JavaScript图表库，被许多世界上最大的公司使用。使用SVG生成图表并回退到VML，以便向后兼容IE6 / IE8。演示图表演示了相当丰富的功能集，但不会在视觉上令人惊叹。一般文档包括许多相关主题的教程，API文档是全面的。

该图表使用配置选项来创建图表，API易于使用。

Highcharts可免费用于非商业和个人用途。其他用途和库存需要商业许可，地图和甘特图是单独许可的。

amCharts

https://www.amcharts.com/

amCharts最近发布了他们的第4版，增加了一个强大的SVG动画引擎，可以创建类似电影的场景。

演示图表看起来非常好。大多数演示提供了许多调色板和滑块UI来实时调整图表变量。文档包括许多教程和完整的API属性描述。

创建图表与基于配置的方法略有不同，而是使用更具声明性的API。它需要稍多的代码来配置图表，但提供更好的代码完成体验。

amCharts提供免费许可证，包括品牌图表和其他用途的付费许可证。

谷歌图表

https://developers.google.com/chart/

Google图表功能强大且易于使用。

样本图表看起来很干净，很容易在眼睛上。图库和扩展图库显示了许多图表类型，但按下汉堡菜单会显示更多类型（如日历），这些类型未在这些图库列表中显示。

每种图表类型都有一个带有实例的专用教程。这些教程包括相关功能和API列表的代码。这是一个开始使用新图表库的愉快体验。

使用配置选项对象自定义图表。使用DataTable类填充数据集，可以由所有图表使用。每种图表类型都有特定类型教程中列出的唯一选项。属性命名是标准化的，许多选项适用于所有类型。

谷歌图表是免费的，但有一点需要注意。它是一种Web服务，无法在本地托管。过去，谷歌已退役API，因此，如果您的使用是关键任务，您可能需要选择其他选项。

ZingChart

https://www.zingchart.com/

ZingChart提供了许多图表类型，并集成了角度，反应和其他框架。它具有强大的功能集和许多自定义选项。

演示图表显示了一系列样式主题，其中一些看起来比其他主题更好，但是根据需要设置样式的选项就在那里。演示不会演示所有可用的图表类型。

文档包括所有可用类型的教程，大量功能和完整的API列表。

ZingChart使用配置选项来自定义图表。示例包括许多属性设置，如字体样式。这些可能会妨碍了解给定图表所需的设置。

ZingChart可以免费使用品牌。付费许可适用于非品牌使用。

FushionCharts

https://www.fusioncharts.com/

FusionCharts作为基于Flash的图表插件开始存在多年。它是一个强大的图表可视化库。它支持许多数据格式，包括XML，JSON和JavaScript，可在现代浏览器中使用，并向后兼容IE6。还支持许多JavaScript框架和服务器端编程语言。

图表库包含大量示例，并且具有干净的视觉外观。

文档包括良好的API描述以及每种图表类型的示例。配置属性按任务和图表功能分组。

图表是使用基于配置的选项创建的，并且相对易于使用。在深入研究API时，属性列表可能会很长。所有配置属性都很浅，例如{chartLeftMargin，showAlternateHGridColor}。这似乎是尝试改进代码完成。

FusionCharts可免费用于图表品牌的个人用途。付费许可可用于非品牌和商业用途。

KOOLCHART

https://www.koolchart.com/

KoolChart是一个基于HTML 5画布的JavaScript图表库。还提供映射和网格产品。

他们的新v5版本包括更具交互性的功能集和更新的样式。视觉效果干净而现代。画布的使用以牺牲基于栅格为代价提供了更好的性能。

这些示例使用基于字符串的XML来应用图表选项，这似乎不如其他方法实用。这些选项看起来像HTML5，但是通过JavaScript字符串设置。

API已详细记录，每个属性都有示例图表。还提供173页PDF手册。

两个月的试用期可供评估。试用期结束后需要许可。

chart.js

https://www.chartjs.org/

Chart.js是一个支持8种图表类型的开源JavaScript库。这是一个只有60kb的小型js库。类型包括折线图，条形图，面积图，雷达，饼图，气泡，散点图和混合。还支持时间序列。它使用canvas元素进行渲染，并对窗口大小调整进行响应以保持缩放粒度。它向后兼容IE9。Polyfill也可以与IE7一起使用。

样本视觉效果相当现代，并且在首次绘制时包含初始动画。在实时添加系列或数据点时，它可以平滑动画。可以在调用update（）函数重绘图表之后修改图表选项。

示例源代码未显示在网站库中，但可在GitHub存储库中找到。配置选项用于创建和修改图表。选项API简洁直观。

该文档是完整的，包括有属性API和代码片段的教程。

Chart.js是一个开源库，可以免费用于个人和商业用途。对于更高级的仪表板要求，有限数量的类型可能是一个问题。

结论

JavaScript图表库的生态系统在过去十年中发生了很大变化。如今有大量的图表产品可满足各种不同的需求，通过数百种图表类型为各种项目提供服务。大多数库提供免费试用版或品牌版，使您能够使用自己的数据，加载和项目复杂性来评估图表的有效性。

大多数图表库很容易处理简单的策划数据集和静态可视化。但是，当可视化真实世界的动态数据时，图表可能无法始终顺利处理。可能需要做更多的工作来调整和排列元素，以便图表看起来正确，并且当新的动态数据可视化时，这种手动调整可能会中断。

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