随笔- 402 文章- 1 评论- 35 阅读- 107万

jquery插件Flot的简单讲解

只是说一下基本用法，举一两个例子，详细用法请查看官方文档

使用方法是要先引入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="width: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>

View Code

在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}
    }]);