做了这么多年软件开发，图表库是经常使用到的，也踩过不少坑，我自己用过的就有：
- mschart（微软出品，asp.net 和winform都可以使用，需要.net3.5以上）
- DevExpress控件（dev家的东西质量都不错，收费，用这个替代了nplot）
- flot控件(js开源库，轻量级，嵌入式设备网页用这个比较好)
- highchart（js库，最好用的商业库，效果什么的没话说）
- echarts（js库，百度维护的免费开源库，整体上没highcharts好，但是免费，功能也非常好强大，一般项目绝对够用，百度内部也是用这个）
- ChartDirector（跨语言的图表库，使用MFC时候用过）
- nplot（.net图表库，.net2.0就可以使用，当时用这个主要是因为.net版本问题）
后面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>
二、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，功能强大，文档全面。
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
