flot绘制折线图 

<!--请先确保你有jquery.js   和   jquery.flot.min.js-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>
     <style type="text/css">
        #flot-placeholder{width:350px;height:300px;}       
    </style>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="flot/jquery.js"></script>
    <script type="text/javascript" src="flot/jquery.flot.min.js"></script>
    <script type="text/javascript">
        var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
 
        var dataset = [{label: "line1",data: data}];
 
        var options = {//设定选项让图表看起来更完整
            series: {
                lines: { show: true },
                points: {
                    radius: 3,
                    show: true
                }
            }
        };
 
        $(document).ready(function () {
            $.plot($("#flot-placeholder"), dataset, options);//呼叫plot函式后把图表绘制出来
/*
　　　　　　$.plot(placeholder, data, options) 
　　　　　　1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度. 
　　　　　　2. data : 数据数组组, 如上面所提过的数据. 
　　　　　　3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等. 
*/

        });
    </script>
</head>
<body>
    <div id="flot-placeholder"></div>//指定一个定位点(Placeholder)
</body>
</html>

 

posted @ 2014-04-24 11:50  笨的BOY  阅读(630)  评论(0)  编辑  收藏  举报