Flotr2 - 我最喜欢的Javascript 图形库

我研究了很久，得到的终极数据可视化方案是 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

补充：web前端 , JavaScript ,