9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在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图表解决方案,我建议针对上面列出的两个库测试您自己的数据,以确保最适合您当前和将来的项目。

Image placeholder
前端答疑
未设置
  23人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

一文告诉你全世界最顶级的开发者都在使用什么数据库

作为一名IT行业从业者,其实从去年已经隐隐约约感觉到数据库的有变化,只是没有想到变得这么快。今年的一些事情实实在在地给了某些数据库重击,如果以前去某数据库还是喊喊,然后该用还用,今年从传统领域刮起的去

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

可视化的JavaScript:作用域(链)

首先,来看看下面的代码:constname="Lydia" constage=21 constcity="SanFrancisco" functiongetPersonInfo(){ constn

可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?JavaScript是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才

2021适合移动和桌面应用的JavaScript框架是什么

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 当听到JavaScript这个词的时候,“web开发”会一下子出现在我们的脑海中,因为JavaScript在很长一段时间里一直是web应

visifire 图表双坐标轴 silverlight

课程推荐:PHP开发工程师--学习猿地精品课程 publicvoidCreateChart(GridoGrid,ObservableCollectionlBaseOilBar){foreach(Lis

多次问鼎 NuerIPS、MRQA 等国际顶级比赛,百度 NLP 技术到底有多强?

人工智能技术的发展尤其是深度学习技术的成功运用,推动自然语言处理(NLP)进入了高速发展阶段。NLP目前也是应用范围最广的人工智能技术之一,已在智能搜索、智能客服、智能助手、智能推荐等方面得到了大规模

中国顶级程序员图鉴,最后一个厉害了!

程序员圈子里有很多如明星般闪耀的牛人!有中国第一代程序员求伯君有获得图灵奖的姚期智有产品取得巨大成功的张小龙商业巨子张一鸣影响开源领域的章亦春……他们的最初都是程序员机遇与热爱,把他们送到了不同的方向

Dubbo 毕业,成为 Apache 基金会顶级项目

Dubbo发展史一览2011年10月27日,阿里巴巴开源了自己服务化治理方案的核心框架Dubbo,服务治理的设计理念开始逐渐在国内软件行业中落地,并被广泛应用。自开源后,许多非阿里系公司选择使用Dub

可自动生成代码,5款基于AI的顶级开发工具

如今,对机器学习潜力感兴趣的程序员都在讨论,如何使用人工智能和基于人工智能的软件开发工具构建应用程序。例如PyTorch和TensorFlow之类的解决方案。除此之外,机器学习技术正以另一种有趣的方式

2019年流行的6大顶级DevOps工具

DevOps作为对开发和运维人员都极为重要的系统,有望在2019年甚至更长时间内保持稳定增长。事实上,据IDC预测,到2022年,全球DevOps软件市场将达到80亿美元,比2017年的39亿美元有所

总结我的Java朋友

推荐课程:java开发工程师--学习猿地精品课程 一、对于Java的认识学习Java,首先要知道Java是一门面向对象编程的语言,而我们之前学过C++,C++是C语言的继承,C++既可以进行C语言的过

一道阿里Web前端面试题看出你的JS基本功

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 //求出如下题目结果({}+{}).length([]+[]).length(function(){}).length这道题目乍一

如何实现一个有趣的Java脚手架

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 新建应用面临的问题在实际项目来发中,当我们创建一个新应用时,大概会遇到哪些问题? 创建应用过程比较繁琐,很多内容其实都是类似的,但就是得

Java中的JDBC

课程推荐:前端开发工程师--学习猿地精品课程 JDBC:JavaDatabaseConnectivityJDBCStatement与PreparedStatement的区别参考:https://www

一句有趣的JS代码

课程推荐:前端开发工程师--学习猿地精品课程 我们经常在框架级的源码中看到类似如下的一句代码,比如:vartoStr1=Function.prototype.call.bind(Object.prot

🚀 Hyperf 发布 v1.1.8 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容 新增 #965新增RedisLua模块,用于管理Lua脚本; #1023hyperf/metric组件的Prometheus驱动新增CUSTOM_MODE模式; 修复 #1013修复Js

🚀 Hyperf 发布 v1.1.9 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容 本周更新主要为DI组件新增了懒加载功能,配置为懒加载后,注入的对象为一个代理对象,在使用到时,才会实现对象的初始化。以及为DIContainer增加了set和define方法来动态的增加对象

🚀 Hyperf 发布 v1.1.9 版本 | 企业级的 PHP 微服务云原生协程框架

更新内容本周更新主要为DI组件新增了懒加载功能,配置为懒加载后,注入的对象为一个代理对象,在使用到时,才会实现对象的初始化。以及为DIContainer增加了set和define方法来动态的增加对象管

专访领英工程副总裁张仁辉:如何驯服算法,打造世界级的职位推荐系统?

大数据文摘出品作者:魏子敏、宋欣仪作为全球最大的职业社交网络,创建于2003年的LinkedIn在过去6年间,从一个7000万左右年营收的企业,增长至30亿美元营业额的企业。五年间LinkedIn业务

张建锋:当代数字化升级的四大关键技术

9月25日,为期三天的2019云栖大会在杭州云栖小镇正式召开,阿里巴巴集团CTO兼阿里云智能总裁张建锋在上午的主会场中发表《构建数字经济基础设施》演讲,提出了当代数字化升级的四大关键技术。阿里巴巴集团