首先,一个简短的历史:

数据收集和使用继续成倍增加,需要可视化数据变得越来越重要。开发人员寻求巩固数以百万计的数据库记录到美丽的图表和仪表板,人类可以快速直观地解释。

数据可视化技术持续改进在过去的十年中,许多先进的图表库现在提供给消费者。在2000年代早期,图一代是由服务器端图像位图的图表。插件比如Flash和Silverlight提供了更多的互动图表经验但是造成严重的下载速度,电池寿命和系统资源。

移动和平板电脑使用的爆炸,插件也不再支持主要平台和开发人员转向开放客户端技术,到处都可以运行。同时,高分辨率屏幕和更常见的出现通过触控手势缩放带来独立的向量图最前沿的决议。

输入当前的时代,数据可视化由JavaScript和SVG(可伸缩向量图形)。图表现在在所有浏览器上运行,没有特殊的插件,支持交互和动画和注意即使在最高分辨率设备。回顾50多个可视化库,这些9产品引人注目:

D3.js

D3.jsis a very extensive and powerful graphics JavaScript library. It allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

D3远远超出典型的图表库,包括许多其他较小的技术模块如轴、颜色、层次结构、轮廓、宽松,多边形等。这一切使得一个陡峭的学习曲线。

试图创建一个简单的图表可以很复杂。所有元素包括轴、图表和其他物品需要明确定义。许多示例展示如何使用CSS样式表元素。没有自动charting-based功能应用。如果你想进入杂草和使用创造力完全控制每个元素,它是最好的选择。争分夺秒地工作,以满足数据可视化项目需求它可能不是最好的选择从零开始。

D3.jscan be a building block for a charting library. Developers have used D3 to make it easier to use chart solutions that consume it, such as NVD3.

D3.jsis open source and free to use.

JSCharting

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

画廊是样本分为图表类型和特征。样式的图表是抛光和收益率一些干净的图表。整体视觉效果提供一个干净的和专业的制图经验。

包括样品使用一个配置对象自定义图表。设置来创建和使用控制图表类型非常简单。一些属性设置指定需要更复杂的图表类型和JSCharting具有强大和动态违约意味着它试图自动选择最佳设置场景。

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

JSCharting非免费商业和个人使用,还提供商业许可选项包括所有图表类型和产品为单个的费用。

Highcharts

Highcharts是一个流行的JavaScript图表库所使用的许多全球最大的公司。生成图表使用SVG和后备VML一路IE6 / IE8的向后兼容性。演示图表展示功能相当丰富但不要哇视觉。一般文档包括教程对许多相关的主题和彻底的API文档。

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

Highcharts非商业和个人免费使用。商业许可所需的其他用法和股票,地图和甘特图分别授权。

amCharts

amCharts最近发布了他们的版本4,添加了一个强大的SVG动画引擎,允许创建类的场景。

演示图表看起来很不错。大多数演示提供大量的调色板和一个滑块UI调整图表实时变量。文档包含许多教程和属性描述完整的API。

创建一个图表感觉稍微不同于基于配置的方法,而不是使用声明式API。它需要稍微代码配置图表但给更好的代码完成体验。

amCharts提供一个免费的许可与其他品牌的图表和有偿许可使用。

Google Charts

Google charts是强大和易于使用。

示例图表看起来干净和简单。画廊和扩展画廊展示了许多图表类型,但按汉堡菜单显示更多类型(如日历),这些画廊列表所示。

每个图表类型都有一个专门的教程与生活的例子。教程包括相关特性和API的代码清单。这是一个愉快的经历开始使用新表库。

图表使用配置选项自定义对象。使用DataTable类填充数据集可以被所有的图表。每个图表类型都有独特的选项类型中列出具体的教程。属性命名是标准化的,许多工作在所有类型的选项。

Google charts是免费的,但是有一个警告。这是一个web服务并在本地无法承载。过去谷歌API的退休如果你使用关键任务你可能想要选择另一种选择。

ZingChart

ZingChart提供了许多图表类型和集成了角,反应和其他框架。它有一个强大的特性集许多定制选项。

演示图表显示一系列造型主题,其中一些比其他的更好看,但是选择风格需要有。演示不显示所有可用的图表类型。

文档包括教程对于所有可用的类型,很多特性,以及完整的API清单。

ZingChart使用配置选项来定制图表。样本包括等属性设置字体样式。这些可以理解的设置需要对于一个给定的图。

与品牌ZingChart可以免费使用。支付授权可使用“山寨”。

FushionCharts

FusionCharts已经存在了许多年开始作为一个基于flash的图表插件。它是一个健壮的图表可视化图书馆。它支持多种数据格式,包括XML、JSON和JavaScript,在现代浏览器和向后兼容的工作回到IE6。许多JavaScript框架也支持和服务器端编程语言。

图库包括大量的例子和他们有一个干净的视觉外观。

文档包括良好的API描述,每个图表类型的例子。配置属性分组的任务和图表功能。

创建图表使用基于配置选项和相对容易使用。属性列表时可以长时间做更深入的API。所有配置属性是浅如{chartLeftMargin, showAlternateHGridColor}。似乎为了改善代码完成。

FusionCharts是免费供个人使用图表品牌。支付许可用于无品牌和商业用途。

KOOLCHART

KoolChart HTML 5 canvas-based JavaScript图表库。一个映射和网格产品也可以。

他们的新v5版本包含了更多的互动特性集和更新样式。视觉效果是干净和现代。帆布的使用提供了更好的性能为代价的光栅。

样品使用基于字符串的XML应用图表选项似乎比其它方法更实用。通过设置这些选项看起来像HTML5但JavaScript字符串。

API是有据可查的每个属性的示例图表。一本173页的PDF手册也可以。

两个月试用期可用于评估。试用期到期后许可是必需的。

Chart.js

Chart.jsis an open source JavaScript library supporting 8 chart types. It is a small js library at just 60kb. Types include line charts, bar charts, area charts, radar, pie charts, bubble, scatter plots, and mixed. A time series is also supported. It uses canvas element for rendering and is responsive on window resize to maintain scale granularity. It is backwards compatible to IE9. Polyfills are available to work with IE7 as well.

样品的视觉效果相当现代看,包括最初的动画首次当绘图。它的顺利当添加系列或实时数据点。图表选项后可以修改和调用update()函数重绘图表。

示例源代码中不显示该网站画廊,但可在GitHub回购。配置选项用于创建和修改图表。API是干净的和直观的选项。

属性的API的文档很全面,包括教程和代码片段。

Chart.jsis an open source library and free to use for personal and commercial use which is a plus. The limited number of types can be an issue for more advanced dashboard requirements.

结论

JavaScript图表库的生态系统已经发展在过去的十年里。今天,有大量的图表符合非常多样化的产品需求,提供范围广泛的项目虽然数以百计的图表类型。大多数图书馆提供免费试用或品牌版使您能够评估表与您自己的数据有效性,加载和项目的复杂性。

对于大多数图表库很容易处理简单的策划和静态可视化数据集。然而,图表并不总是顺利的处理真实世界的时候,动态数据可视化。可能需要更多的工作来调整和安排元素图表显示正确和本手册调整可以打破新的动态数据可视化。

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