14款基于Javascript的数据可视化工具

编译地址:Are you ready for the era of big data? 14 popular JavaScript based data visualization tools
原文地址:http://efe.baidu.com/blog/14-popular-data-visualization-tools/

俗话说,一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解,让信息发布者更加高效地展示自己的核心内容。在前端开发中,如果缺少合适工具,制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热,有较多优秀的图表开源库和制作工具脱颖而出。下面,我们就拿其中比较有名的 14个产品进行简要介绍。

AnyChart

AnyChart

链接:http://www.anychart.com/

AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案,它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外,它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据,该方式让开发人员非常灵活地控制图表上的每一个数据点,而当图表数据点数量偏大时,则可以采用 CSV 数据输入,减小数据文件大小和图表加载时间。

amCharts

amCharts

链接:http://www.amcharts.com/

amCharts 是一款高级图表库,致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库,在应用中不依赖任何其他第三方类库,就可直接编译运行。除了提供最基本的规范要素外,amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时,用鼠标 hover 图表内容,可以与其进行交互,使图表展示细节信息,其中呈现信息的容器被叫做 Balloon(气球)。除此之外图表可以动态动画的形式被绘制出来,带来了了非常好的展示效果。

Cesium

Cesium

链接:http://cesiumjs.org/

Cesium 同样专注于地理数据可视化,它是一个 Javascript 库,可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外,它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议,支持商业及非商业项目。

Chart.js

Chart.js

链接:http://www.chartjs.org/

Chart.js 是一个简单、面向对象,为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5,响应式,支持所有现代浏览器。同时它不依赖任何外部工具库,本身轻量级,且支持模块化,即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。

Chartist.js

Chartist.js

链接:https://gionkunz.github.io/chartist-js/

Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具,它支持 SVG 格式,图表数据转换灵活,同时也支持多种图表展现形式。在工程中,Chartist.js 的 CSS 和 JavaScript 分离,因此代码比较简洁,在应用时配置流程十分简单。它生成的是响应式图表,可以自动支持不同的浏览器尺寸和分辨率,更多的是,它也支持自定义 SASS 架构。

D3

D3

链接:http://vis.stanford.edu/papers/d3

2011年,Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3,它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式,例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富,易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果,缺点是学习门槛比较高。与 jQuery 类似,D3 直接对 DOM 进行操作,这是它与其它可视化工具的主要区别所在:它会设置单独的对象以及功能集,并通过标准 API 进行 DOM 调用。

echarts

echarts

链接:http://echarts.baidu.com/

一款免费开源的数据可视化产品,给用户提供直观、生动、可交互和可个性化定制的数据可视化图表。Echarts 上手简单。其具有的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,帮助用户在对数据挖掘、整合时大幅提高效率。同时,Echarts 提供了丰富的图表类型,除了常见的折柱饼,还支持地图、力导向图、treemap、热力图、树图等等。更惊艳的是,它还支持任意维度的堆积和多图表混合展现。总而言之,这是一款让我们非常惊喜的可视化产品,非常强大,不过他图表不是很美观,对移动端的支持也还有些欠缺,不过这些问题在官方最新发布的3.0beta中得到了很大改善

Flot

Flot

链接:http://www.flotcharts.org/

Flot 是一个纯 Javascript 绘图库,作为 jQuery 的插件使用。它可以较为轻松地跨浏览器工作,甚至包括 IE6。因为 jQuery 的特性,开发者可以全面地控制图表的动画、交互,把数据的呈现过程优化得更加完美。

FusionCharts Free

FusionCharts

链接:http://www.fusioncharts.com/

FusionCharts Free 是可跨平台、跨浏览器的 Flash 图表解决方案,它能够被 ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、简单 HTML 页面甚至 PPT 调用。在使用过程中,用户原则上并不需要知道任何 Flash 的知识,只需要了解你所用的编程语言,并进行简单的调用即可以实现应用。

Google Chart

Google

链接:http://developers.google.com/chart/

不需要多介绍,大家都非常了解的可视化工具。

HighCharts

HighCharts

链接:http://www.highcharts.com/

HighCharts 是一个界面美观,时下非常流行的的纯 Javascript 图表库。它实际上由两部分组成:HighCharts 和 Highstock。其中 HighCharts 能够很便捷地在 Web 网站或是 Web 应用程序中添加可交互图表,并可免费用于个人学习、个人网站和其他非商业用途。目前 HighCharts 支持的图表类型有曲线图、区域图、柱状图、饼状图、散点图和一些综合图表。而 HighStock 可以为用户方便地建立股票或一般的时间轴图表。它提供先进的导航选项,预设的日期范围,日期选择器,滚动和平移等公盟。

Leaflet

Leaflet

链接:http://leafletjs.com/

Leaflet 是一个可以同时良好运行于桌面和移动端的 Javascript 可交互地图库。它使用 OpenStreetMap 的数据,并把可视化数据集中在一起。Leaflet 库的内核库很小,但由丰富的插件可以大幅拓展其功能,常常被用于需要展示地理位置的项目。

MetricsGraphics

MetricsGraphics

链接:http://metricsgraphicsjs.org/

MetricsGraphics.js 是一个基于 D3,为可视化和时间序列化的数据而优化的库。它提供了一种便捷的方法,用一致且响应式方式来产生相同类型的图形。它现在支持折线图、散点图、直方图、地毯图和基本的线性回归图。同时,它体积非常小巧,通常可以控制在 60kb 之内。

Sigma.js

Sigma.js

链接:http://sigmajs.org/

Sigma.js 是一个专注于图形绘制的 Javascript 库,它可以让开发者轻松地在自己的 Web 应用中发布网络图。它给提供了很多设置项,使开发者可以自由地定义网络图的绘制方式。同时其也提供了丰富的 API,例如移动视图、刷新渲染、事件监听等等都可以轻易实现,这让开发者可以在交互上进行更多拓展。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容