只是说一下基本用法，举一两个例子，详细用法请查看官方文档
使用方法是要先引入jquery插件，然后引入flot插件。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../js/jquery.flot.js"></script>
首先来看一下官方introduction
Consider a call to the plot function:
var plot = $.plot(placeholder, data, options)
这应该是plot用法的总基调，因为每个参数都有默认值，所以只需指定需要修改的参数即可。
举一个简单的例子，data是基本数据数组
html文件
<!DOCTYPE html>
<html>
<head>
<title>学习使用flot</title>
<meta charset="utf-8">
</head>
<body>
<div id="navigate">
</div>
<div id="content">
<div id="flot" style="800px;height:600px;">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.flot.js"></script>
<script type="text/javascript" src="../js/flottest.js"></script>
</body>
</html>
在js文件中写入
$(function(){ $.plot($("#flot"),[[[0,0],[1,1],[2,1],[4,3],[5,7]]]) })
出来的效果如图所示
data也可以是对象，
对于数据为对象类型时应当满足如下格式内容：
{ color: color or number data: rawdata label: string lines: specific lines options bars: specific bars options points: specific points options xaxis: number yaxis: number clickable: boolean hoverable: boolean shadowSize: number highlightColor: color or number }
js代码如下
var d1=[] for(var i=0;i<10;i +=0.2){ d1.push([i,Math.sin(i)*5]); } var d2 = [[0, 3], [4, 7], [8, 0], [9, 7]]; $.plot($("#flot2"),[{ data:d1, label:"sin(x)", lines: { show: true} },{ data:d2, label:"line", points:{show:true}, lines:{show:true} }]);
显示效果如下：
