flot介绍与使用(一款开源绘图js插件)

做了这么多年软件开发，图表库是经常使用到的，也踩过不少坑，我自己用过的就有：

mschart（微软出品，asp.net 和winform都可以使用，需要.net3.5以上）
DevExpress控件（dev家的东西质量都不错，收费，用这个替代了nplot）
flot控件(js开源库，轻量级，嵌入式设备网页用这个比较好)
highchart（js库，最好用的商业库，效果什么的没话说）
echarts（js库，百度维护的免费开源库，整体上没highcharts好，但是免费，功能也非常好强大，一般项目绝对够用，百度内部也是用这个）
ChartDirector（跨语言的图表库，使用MFC时候用过）
nplot（.net图表库，.net2.0就可以使用，当时用这个主要是因为.net版本问题）

前2个是服务端生成图片，这种库适合大数据显示，因为js库一般最多显示20万条记录，再多的话要么浏览器卡，要么像IE那样直接报内存过高，这种库依赖于后台语言，类似的还有directchart，jchart(java)等

后面2个其实是我下个项目用的，下个项目是基于java struts2的，不过js图表库是和后台语言无关的

前面2种都是在后台生成图片然后发送到客户端显示，当然DevExpress虽然是生成图片，但是还是支持鼠标事件的，关于它的介绍，我会另外写篇文章，这里主要介绍flot控件。

flot控件是基于jquery的一款js插件，绘图利用了html5标签Canvas；虽然IE8及其以下版本不支持Canvas，但是flot利用javascript进行了模拟，使得在IE6也能够支持，当然性能上或多或少会有影响，具体影响等我测试过后再发过来。

一、flot使用方式

flot和一般js插件使用方式一样，只需要引用几个js文件（包括jquery），然后放置一个div容器就可以了，官网上给的关键代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Flot Examples</title><link href="layout.css" rel="stylesheet" type="text/css"><!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--><script language="javascript" type="text/javascript" src="../jquery.js"></script><script language="javascript" type="text/javascript" src="../jquery.flot.js"></script></head><body><div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]];$.plot($("#placeholder"), [ d1 ]);
});
</script></body>
</html>

从代码可以看出来，主要引用了2个js文件并使用了一个div标签，使用是非常简单的。

二、flot与后台交互

flot的调用非常简单，个人感觉和matlab的绘图调用比较像，都是通过一个类似二维矩阵提供数据源，当然flot使用的是json对象数据，毕竟这个比较通用，与后台交互的时候，要注意几个地方：

1.后台生成的数据必定是一个字符串，该字符串必须符合json格式，比如：

string data="[[0, 3], [4, 8], [8, 5], [9, 13]]";

前台通过ajax接收到这个字符串后，是不能直接传递给plot函数的，必须转化成js的json对象，比如：

function ajaxCallback(data){var jsonData=eval('('+data+')');$.plot($("#placeholder"), [ jsonData ]);
}

这样才能正确显示

2.X轴为时间轴时候的显示与交互

利用flot绘制基于时间的曲线时候，要注意时间的转化，从官方给出的demo中可以看出，flot是利用js的时间戳来将时间转化为整型数序列的。

此文章放弃编辑，建议直接使用百度的Echarts，功能强大，文档全面。