让数据可视化变得简单 – JavaScript 图形库

©作者 | 董叶

公司决策层会围绕着数据来制定相应的策略,数据的重要性与日俱增,*、金融机构、互联网大厂正在以前所未有的速度收集数据,面对扑面而来的数据,没有抽象、视觉层的帮助,我们很难快速理解掌握其中信息,正确的图形工具往往是致胜的关键

对于JS开发人员而言,数据可视化能力和开发网页一样重要,特别是需要将两者结合起来的时候,在大数据时代,在网页中显示数据统计图表,从而能很直观地了解数据的走向。

随着JavaScript 在数据可视化方向的日益普及,涌现出一大批JavaScript图形库为前端网页创建精美的图表,但是如何选择合适JavaScript 图形库需要考虑许多因素:

1 想构建什么样的图表?饼图、地图、线条、条形图?

2 数据集有多大? 基于 SVG 的库通常更适合中小型数据集,基于Canvas 则是大型数据集更可靠的选择。

3 应用程序是用于Web、移动还是两者兼而有之?

4 使用的JavaScript 框架?

5 何时使用对应的图形库? 如果是自有研发,前期成本高,但是后期可塑性强。

百度和谷歌都开发了对应的图形库,Echart、Google Charts , 以下介绍的几款图形库有着各自不同的特点。

01 D3.js

让数据可视化变得简单 – JavaScript 图形库

 

D3是最受欢迎的JS图形库之一,不仅用于数据可视化,还用于动画、数据分析、地理和数据实用程序。

通过HTML、SVG和CSS将数据鲜活形象地展示出来,它的所有操作都是真实的DOM操作,是和React或Vue 等现代前端框架完全不同的思路, 基于一整套数据到SVG属性的计算框架和丰富的工具包, 即使不理解SVG属性计算公式的程序员也能轻松将数据转换成想要的SVG属性。

D3 解决问题核心是基于数据的高效文档操作。提供了非凡的灵活性。

使用最小的开销,使得D3的速度非常快,支持大型数据集以及交互与动画的动态行为。

D3的函数风格允许通过各种组件和插件的形式进行代码的重用。

D3 缺点是它有一个陡峭的学习曲线,文档已经过时并且导航混乱,上手要比其他框架困难。

D3 GitHub

D3 画廊

02 Victory

让数据可视化变得简单 – JavaScript 图形库

 

一组专门为React 和 React Native设计的模块化图表组件。

Victory很好地提供了创建图表的基础。轴自定义、标签、为单个图形传递不同的数据集之类的事情都非常简单,并且调整样式和行为非常简单直观。

它非常有效,可以让您用最少的代码构建一些漂亮的图表。绝对值得检查跨平台应用程序。

Victory GitHub

Victroy画廊

03 React-vis

让数据可视化变得简单 – JavaScript 图形库

 

它是 Uber创建的一个简单的JavaScript 图形可视化库,它允许你创建所有常用类型的图表:条形图、树形图、线形图、面积图等。

它的API 非常简单,并提供了很大的灵活性。它很轻,动画简单但流畅。它还允许您根据现有元素编写自定义图表。

尽管关于React-Vis的内容并不多,但文档简单易读。

React-vis GitHub

React-vis 示例

04 Flexmonster / Webdatarocks

让数据可视化变得简单 – JavaScript 图形库

 

它是React Native的数据透视表组件,对习惯了Excel分析风格的业务人员十分友好,并且能与React和其他框架很好地兼容,适合需要聚合、排序和过滤功能的数据报告。

它可以在Web 浏览器中免费使用,支持Microsoft Analysis Services OLAP多维数据集,Mondrian,icCube,Salesforce,SAP,SQL(MS SQL,MySQL和许多其他)静态数据库或者CSV文件。

可以在客户端浏览器处理多达100MB的数据文档以及庞大的OLAP多维数据集信息量,非常适合用于商业智能(BI)信息评估。

05 Chart.js

让数据可视化变得简单 – JavaScript 图形库

 

一个非常流行的开源库,在GitHub 上拥有超过4万颗星。它是轻量级的,可以使用HTML5 Canvas元素构建响应式图表。轻松混合和匹配折线图和条形图以组合不同的数据集,这是一个非常棒的功能。

Chart.js 默认提供六种不同的图表类型,它也是很多公司处理超大数据集的首选库。操作简单、对初学者友好。绝对是最有趣的开源库之一。

GitHub 上的

Chart.js Chart.js 示例

06 amCharts

让数据可视化变得简单 – JavaScript 图形库

 

最热门的商业图表库之一。基于其精美的设计使,amCharts将Apple、Amazon、NASA和许多其他知名公司列为他们的客户,amCharts是一种商业工具,每个网站许可证的起价为180 美元。

作为回报,使用者可以获得所需的所有类型的图表,包括地理地图和出色的客服支持,响应时间平均不到3小时。

对于大公司来说,这是一个很好的解决方案。对于小公司或者个人用户,amCharts 也支持免费下载,唯一的限制是会在图表的左上角显示该网站的链接。

适用于:Angular、React、Vue.js、普通 JS 应用程序、TypeScript

amCharts GitHub

amCharts 网站

07 Zoomcharts

让数据可视化变得简单 – JavaScript 图形库

 

自称为“世界上最具交互性的JavaScript图表库”。除了反应性,它主要关注多点触控手势和各种设备的原生感觉。

即通过放大或者缩小来与图表进行物理交互,从而在不同数据粒度进行切换,支持数据图表的联动,对任何一个图表的过滤操作,会在其他图表中响应。

该库承诺提供漂亮的可视化效果,只需很少的代码,并且可以轻松部署在产品中。

ZoomChatrts在默认设置下,使用相同的数据和设置,运行速度比基于 SVG 的竞争对手快 20倍。

这是因为ZoomCharts从一开始就是为了处理和可视化大数据构建,支持在同一个图表混合多个数据源,通过数据存储和展示分开,轻松集成数据的下钻聚合操作。

Zoomcharts 网站

Zoomcharts 画廊

JavaScript图形世界中有很多机会,这些丰富的图形库可以协助大家完成复杂的数据分析工作,通过抽象的视图层解读数据,帮助企业挖掘数据价值。

越来越多的图形库证明了数据可视化对于整个Web的重要性——希望上面的介绍能帮助相关项目开发者创建漂亮的数据化解决方案。

上一篇:如何让div水平垂直居中


下一篇:Access应用笔记<四>-一个完整的自动化报表搭建过程