做了這麼多年軟件開發，圖表庫是經常使用到的，也踩過不少坑，我自己用過的就有：
- 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，功能強大，文檔全面。