菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
23
0

9 个顶级的JavaScript图表库

原创
05/13 14:22
阅读数 770

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图表体验,但是下载速度,电池寿命和系统资源却遭受了沉重打击。

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

进入以JavaScript和SVG(可伸缩矢量图形)为主的数据可视化的当前时代。图表现在可以在所有浏览器上运行,而无需特殊插件,支持交互性和动画,即使在最高分辨率的设备上也可以清晰显示。回顾50多个可视化库,这9种产品脱颖而出:

D3.js

1.jpg

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

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

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

D3.js可以作为图表库的构建块。开发人员已使用D3使使用它的图表解决方案(如NVD3)更容易使用。

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

JSCharting

2.jpg

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

画廊分为图表类型和功能样本。图表样式经过抛光,可以生成一些外观简洁的图表。整体视觉效果提供了干净专业的制图体验。

包含的样本使用配置对象来自定义图表。创建和控制图表类型的设置非常易于使用。只需很少的属性设置即可指定更复杂的图表类型,并且JSCharting具有强大而动态的默认值,这意味着它会尝试自动为方案选择最佳设置。

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

JSCharting对于非商业和个人用途是免费的,并且还提供商业许可选项,其中包括所有图表类型和产品,但需要付费。

Highcharts

3.jpg

Highcharts是一个流行的JavaScript图表库,被许多世界上最大的公司使用。使用SVG生成图表并回退到VML,以实现向后兼容IE6 / IE8的所有功能。演示图表展示了相当丰富的功能集,但外观上并不令人赞叹。常规文档包括许多相关主题的教程,并且API文档非常详尽。

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

Highcharts可免费用于非商业和个人用途。其他用途需要商业许可,并且库存,地图和甘特图分别获得许可。

amCharts

4.jpg

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

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

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

amCharts提供一个免费的带有品牌图表的许可证,并为其他用途提供付费许可证。

Google Charts

5.jpg

Google Charts功能强大且易于使用。

样本表看起来很干净,而且很容易看清。画廊和扩展画廊显示了许多图表类型,但是按汉堡菜单会显示更多类型(如日历),这些类型未在这些画廊列表中显示。

每种图表类型都有专门的教程和实时示例。这些教程包括相关功能和API清单的代码。这是从新图表库开始的愉快经历。

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

Google Charts是免费的,但有一个警告。它是一个Web服务,不能在本地托管。过去,Google已经淘汰了API,因此,如果您的使用对任务至关重要,则可能需要选择其他选项。

ZingChart

6.jpg

ZingChart提供了许多图表类型,并与angular、react和其他框架集成。它具有强大的功能集和许多定制选项。

演示图表显示了一系列样式主题,其中一些看起来比其他的更好,但是可以根据需要选择样式。演示不会演示所有可用的图表类型。

文档包括所有可用类型的教程、大量特性和完整的API清单。

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

ZingChart可以与品牌一起免费使用。付费许可可用于非品牌使用。

FusionCharts

7.jpg

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

图表图库包含大量的示例,它们具有清晰的视觉外观。

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

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

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

KOOLCHART

8.jpg

KoolChart是一个基于html5的JavaScript图表库。还提供了一个映射和网格产品。

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

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

该API的文档详细说明了每个属性的示例图表。也提供173页的PDF手册。

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

Chart.js

9.jpg

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

示例视觉效果相当现代,包括第一次绘图时的初始动画。它在实时添加序列或数据点时平滑地设置动画。可以在调用update()函数重新绘制图表之后,修改图表选项。

示例源代码未显示在网站库中,但可在GitHub repo中找到。配置选项用于创建和修改图表。选项API是干净和直观的。

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

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

结论

在过去的十年中,JavaScript图表库的生态系统已经有了长足的发展。如今,有大量的图表产品可以满足非常多样化的要求,通过数百种图表类型为广泛的项目提供服务。大多数库提供免费的试用版或商标版,使您可以利用自己的数据,加载和项目复杂性来评估图表的有效性。

大多数图表库很容易处理简单的精选数据集和静态可视化。但是,当可视化现实世界中的动态数据时,图表可能并不总是能顺利处理。可能需要做更多的工作来调整和排列元素,以使图表看起来正确,并且随着新动态数据的可视化,这种手动调整可能会中断。

为了选择满足您独特需求的最佳JS图表解决方案,我建议针对上面列出的两个库测试您自己的数据,以确保最适合您当前和将来的项目。

发表评论

0/200
23 点赞
0 评论
收藏
为你推荐 换一批