English | 正體中文 | 简体中文

下载Flot

Flot目前最新的版本是0,7版, 你可以从Flot官方网站下载. 下载并解压缩之后,
复制以下的档案到你要放置的资料夹

excanvas.min.js   //让IE 6.7.8版也能支援HTML5 canvas功能, 
                  //记住此档案永远要放在jquery.flot.js之前才能让Flot正常运作
jquery.flot.js    //Flot javascript
jquery.js

设定

在你开始之前, 你需要设定include相关的javascript library, 虽然在下载Flot时zip档里包含的jQuery library不是最新版本,
不过你随时都可以替换成最新版的jQuery(目前为1.8.3版)
<html>
<head>
    <title></title>
    <script src="excanvas.min.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery.flot.js"></script>
</head>
<body>
    <div id="flotcanvas">
    </div>
</body>
</html>
你可以注意到有个<div id="flotcanvas"></div>, 这是让Flot产生出图表的位置

第一个用Flot绘制的图表

呼叫Flot并且传递资料和选项后即可产生图表
var plot = $.plot(placeholder, data, options)

图表资料格式
[ 
    [x1, y1], [x2, y2], ... 
]

e.g.
[ 
    [1, 5], [2, 9], [3, 20], [4, 2], [5, 15], ... 
]

简单的图表范例

范例程式码Expand
<!-- HTML -->
<div id="example-section2">
    <div id="flotcontainer" style="width: 600px;height:150px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
    var data = [];

    for (var i = 0; i < 30; i += 0.5){        
        data.push([i, Math.sin(i)]);
    }

    $.plot($("#example-section2 #flotcontainer"), [data]);

});
</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact