jquery插件Flot的简单讲解

时间：2022-01-04 17:23:14

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

使用方法是要先引入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>
在js文件中写入
$(function(){

    $.plot($("#flot"),[[[,],[,],[,],[,],[,]]])

})

出来的效果如图所示

jquery插件Flot的简单讲解

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=;i<;i +=0.2){

        d1.push([i,Math.sin(i)*]);

    }

    var d2 = [[, ], [, ], [, ], [, ]];

    $.plot($("#flot2"),[{

        data:d1,

        label:"sin(x)",

        lines: { show: true}

    },{

        data:d2,

        label:"line",

        points:{show:true},

        lines:{show:true}

    }]);

显示效果如下：

jquery插件Flot的简单讲解

相关文章