Flotr2 - 我最喜欢的 Javascript 图形库

标签: flotr2 javascript 图形库 | 发表时间:2012-06-19 09:31 | 作者:alswl
出处:http://www.yeeyan.org

译者 alswl

原文地址: Flotr2 - my favorite javascript graph library

译者: alswl


我研究了很久,得到的终极数据可视化方案是 javascript + html ,这是唯一像样又好用的。

Gnuplot 虽然看上去不错,但是不太漂亮。 一些基于 Python 的图形化工具也有同样的问题。 Mathematica 在我看来则太正式了,所以我不怎么用它。

基于 javascript 的图形化工具其中一个巨大优势是易于共享。 通过设置 Github Page、分享链接等方法,我们都可以很方便的获取最新图表数据, 甚至可以进行交互。

那些基于 javascript 的图形化工具

有很多 javascript 图形化库,从极简到复杂绚丽的风格,都极为丰富。

最流行的可能就是 d3.jsRaphael 了。 他们用起来相当麻烦,但却能实现绚丽到超越你想象的可视化效果。

Raphael 还一个 web 矢量库,外观同样很漂亮。

An analytics graph in Raphael

Raphael 中的分析图表

Bubble graph in Raphael

Raphael 中的气泡图

A clock made with Raphael

Raphael 中的钟表时间图

D3.js 的愿景是帮助人们轻松的完成数据可视化,可惜事与愿违, 它弄得太复杂了。

HN top titles visualisation in d3.js

Hacker News 文章标题的可视化数据

House hunting in d3.js

用 d3.js 绘制购房信息

Scatterplots made with d3.js

用 d3.js 制作的散布图

Flotr2

这些可视化工具,虽然看上去很华丽,但是难以使用。 他们会很浪费时间,让人捣鼓到最后却发现什么都没弄出来。 大部分 Raphael 和 d3 的功能矫正过枉了,有时我们只想要一个简单的绘图工具而已。

为了将 我去年的 750 个关键字数据可视化,我使用了 Flotr2。 只花费我数分钟,就能通过操作 javascript 将数据转化成 Flotr2 能理解的函数, 然后 Flotr2 就将数据转化成漂亮的图表。

Flotr2 最大的优点是他没有过度设计,当你只想要一个简单图表时候, 它不会让你去操作过多东西。

往往只需要你设定必要的数据和一两个标签,比如:


function draw_time(container, data, title) {
	var
	start = new Date(DATA[0].date).getTime(),
	options,
	graph,
	i, x, o;
 
	options = {
		xaxis : {
			mode : 'time',
			labelsAngle : 45
		},
		selection : {
			mode : 'x'
		},
		legend: {
			position: 'se'
		},
		HtmlText : false,
		title : title
	};
 
	// Draw graph with default options, overwriting with passed options
	function drawGraph (opts) {
 
		// Clone the options, so the 'options' variable always keeps intact.
		o = Flotr._.extend(Flotr._.clone(options), opts || {});
 
		// Return a new graph.
		return Flotr.draw(
			container,
			data,
			options
		);
	}
 
	graph = drawGraph();
 
	Flotr.EventAdapter.observe(container, 'flotr:select', function(area){
		// Draw selected area
		graph = drawGraph({
			xaxis : { min : area.x1, max : area.x2, mode : 'time', labelsAngle : 45 },
			yaxis : { min : area.y1, max : area.y2 }
		});
	});
 
	// When graph is clicked, draw the graph with default area.
	Flotr.EventAdapter.observe(container, 'flotr:click', function () { graph = drawGraph();});
}


然后你就能获得下面这张图表:

A graph in Flotr2

好用吧。

看上去蛮漂亮,符合它简洁易用的特点。

相关 [flotr2 javascript 图形库] 推荐:

Flotr2 - 我最喜欢的 Javascript 图形库

- - 译言-电脑/网络/数码科技
原文地址: Flotr2 - my favorite javascript graph library. 我研究了很久,得到的终极数据可视化方案是 javascript + html ,这是唯一像样又好用的. Gnuplot 虽然看上去不错,但是不太漂亮. 一些基于 Python 的图形化工具也有同样的问题.

使用绘图类库flotr2来绘制HTML5的图形和图表

- - 博客园_首页
日期:2012/02/26 . 今天介绍一个款不错的HTML5绘图和制表类库- flotr2. 它可以有效地帮助你绘制基于HTML5的图表和图形,包括线图,柱状图,饼图,气泡图等等,对于浏览器的兼容性也非常不错.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex's Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客
  注:本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文.   如果三年前你问我应该学什么语言,我会告诉你是Ruby.   如果你现在想学一门语言的话,你应该学习JavaScript..   我认为,每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.

javascript 贪食蛇

- Xin - 博客园-首页原创精华区
我的程序用javascript与Html中的table结合,实现的简单的贪食蛇游戏,游戏的主要特点,可调整蛇移动速度,可调整蛇移动范围,碰壁、咬到身体则“Game Over. 游戏并不完善,只是实现了主要的功用,有设计不合理的地方,欢迎您感大家提意见.        实现方法:由javascript语言中的setInterval方法驱动整个游戏程序,设置“nowDirection”即蛇的当前移动方向为全局变量,由setInterval方法定时获取蛇的移动方向,由document.onkeydown()捕捉当前按键(上、下、左、右)以修改nowDirection,这样就可以用方向按键控制蛇周期时间的定向移动.

你不懂Javascript

- 英建 - 黑客志
过去几年我注意到技术圈一个很奇怪的现象,有太多程序员将那些他们只是有过非常浅显的了解,但其实根本就不懂的技术写到他们的简历中,这个现象几乎每种语言都有,但这其中最严重的就要数Javascript了. 出现这种状况的一个很大的原因就是现如今几乎每个开发者的工作都或多或少要依赖于Javascript,但大多数人并不真的理解这门语言,他们常用的学习方式是复制粘贴,使用这种方式,你永远不会真正学会这门语言,而只能得到一个你已经懂了的假象.

Javascript 中的 var

- - 酷壳 - CoolShell.cn
MelonCard发布了一篇文章——” how one missing var ruined our launch“(”少写了一个var毁了我的网站”),这篇文章是说MelonCard用Node.js做后台,因为出了一个小高峰——有50-100人注册,结果整个网站都不响应了,而且还出现了很多奇怪的问题.