首页 > 程序开发 > web前端 > JavaScript >

Flotr2 - 我最喜欢的Javascript 图形库

2012-06-22

我研究了很久,得到的终极数据可视化方案是 javascript + html ,这是唯一像样又好用的。Gnuplot虽然看上去不错,但是不太漂亮。一些基于 Python 的图形化工具也有同样的问题。Mathematica在我看来则太正式...

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

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

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

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

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

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

Raphael 中的分析图表

Raphael 中的气泡图

Raphael 中的钟表时间图

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

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

用 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();});
}

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

好用吧。

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

作者:log4d

相关文章
最新文章
热点推荐