jQuery Flot 绘制简单折线图

绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在<body>之间
1
<div id="flot-placeholder"></div>
再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生 "Uncaught Invalid dimensions for plot, width = 0, height = 0"的错误, 要特别注意!
1
2
3
4
#flot-placeholder{
    width:350px;
    height:300px;
}
接下来建立如下的数据数组组 变数data是数据源, 以指定x及y轴数据如[x, y], 变量dataset里是除了指定数据源外, 还指定了标签(label)名称, 若卷标名称有设定时, 图表右上方的图例才会显示.
1
2
3
4
5
6
7
8
9
10
11
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
    }
];
绘制图表时可以设定一些选项让图表看起来更完整
1
2
3
4
5
6
7
8
9
var options = {
    series: { 
        lines: { show: true },     
        points: {
            radius: 3,
            show: true
        }
    }
};
最后再呼叫plot函式后把图表绘制出来
1
2
3
$(document).ready(function () {
    $.plot($("#flot-placeholder"), dataset, options);
});
呼叫plot函式需要带入3个参数

$.plot(placeholder, data, options)
1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度.
2. data : 数据数组组, 如上面所提过的数据.
3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等.

下面是基本折线图的完整程序代码

<!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="http://www.pureexample.com/js/lib/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://www.pureexample.com/js/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);
        });
    </script>
</head>
<body>
    <div id="flot-placeholder"></div>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页