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

使用方法是要先引入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"),[[[,],[,],[,],[,],[,]]])

})

出来的效果如图所示

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的简单讲解的更多相关文章

  1. jQuery插件Flot的介绍

    Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题.顺便提一句,D3是采用SVG来绘制图形的,从我自 ...

  2. jQuery插件Flot实战Demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. jquery 插件ajaxupload 的简单应用

    var button = $('#upload_button');  //定义能够上传文件的按钮,就是一个普通的button var fileType = "zip",fileNu ...

  4. 2014年50个程序员最适用的免费JQuery插件

    有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...

  5. jQuery插件综合应用(三)发布文章页面

    一.使用的插件 一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成 ...

  6. 常用在网站上的30个jQuery插件

    jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...

  7. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  8. jquery插件分类与编写详细讲解

    jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的j ...

  9. jQuery图表插件Flot中文文档

    转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...

随机推荐

  1. 如何在Linux中用命令行工具管理KVM虚拟环境

    第一步: 配置存储池 Virsh命令行工具是一款管理virsh客户域的用户界面,它能在命令行中运行所给的命令以及它的参数,我们要用它给我们的KVM环境创建存储池,想知道关于这个工具的更多信息,用以下这 ...

  2. 设置网站expires和max-age属性

    转:http://www.zicheng.net/article/982022.htm 在使用百度站长工具测试网站优化建议时,在 设置静态内容缓存时间 栏目里,会提示 类似 FAILED - (未设置 ...

  3. DispatcherTimer

    1.IsEnabled 表示计时器是否已经启动. 2.DispatcherTimer处于当前线程的管理,不会新建一个线程专门用于计时操作,也就是说,当前线程可能会阻塞计时器.因此,Dispatcher ...

  4. C#.NET常见问题(FAQ)-在VS程序如何取消.vshost的进程

    双击执行一个EXE程序,会有两个进程,程序关闭之后,貌似只能关闭你的程序,附加的vshost.exe仍然存在   在调试页面,改成release,同时取消最后一项启用承载进程   在生成页面,将高级选 ...

  5. 把Linux目录挂载到开发板、设置开发板从NFS启动、取消开发板从NFS启动

    声明:文中"PC虚拟机Linux"是指在PC上安装了虚拟机,然后在虚拟机中装的Linux. 关于NFS的详细介绍可参考:http://www.cnblogs.com/nufangr ...

  6. 在云主机或vps上用bzr拉OpenERP7.0代码

    前面的文章讲过了用bzr来参与OpenERP开发的过程,其中很重要的一步就是创建本地分支.我在阿里云上建server和web的分支都没有问题,就是addons分支搞了30几次都在中途被kill了. 今 ...

  7. wso2esb安装及helloworld

    1.系统环境 Ubuntu12.04    192.168.0.97    root/password找管理员 Ubuntu12.04    192.168.0.99    root/password ...

  8. 【Docker】拉取Oracle 11g镜像配置

    以下是基于阿里云服务器Centos 7操作 1.拉取Oracle11g镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_1 ...

  9. Jquery各版本下载

    jquery-2.1.4 (注!jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址: <script src= ...

  10. 17、JAVA流程控制

    一.IF 1.第一种形式:if if(逻辑表达式){ 语句1; 语句2; ... } 当if中只有一条语句时,可以省略{} 2.第二种形式:if-else if(逻辑表达式){ 语句块1: } els ...