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>
在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的简单讲解的更多相关文章
- jQuery插件Flot的介绍
Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题.顺便提一句,D3是采用SVG来绘制图形的,从我自 ...
- jQuery插件Flot实战Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jquery 插件ajaxupload 的简单应用
var button = $('#upload_button'); //定义能够上传文件的按钮,就是一个普通的button var fileType = "zip",fileNu ...
- 2014年50个程序员最适用的免费JQuery插件
有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...
- jQuery插件综合应用(三)发布文章页面
一.使用的插件 一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成 ...
- 常用在网站上的30个jQuery插件
jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件 开发能让所有的j ...
- jQuery图表插件Flot中文文档
转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...
随机推荐
- Linux下面kettle的部署
一直以来服务器是linux系统,但是感觉linux图形化不强,于是从接触kettle以来都是在windows系统操作ETL的设计和处理.现在需要在linux中查看一下kettle资源库是否连接正常,以 ...
- COM中导出GUID
编写COM组件的时候需要导出GUID,以下是代码示例. extern "C" const GUID CLSID_Dictionary = { 0x54bf656 ...
- 使用Git下载Hadoop的到本地Eclipse开发环境
使用Git下载Hadoop的到本地Eclipse开发环境 博客分类: Hadoop *n*x MacBook Air hadoopgitmaveneclipsejava 问题场景 按照官网http: ...
- 如何使用Replace Pioneer批量查找和替换并提取指定字符串
1 我们查看源代码之后获得的网页文件如下图所示,一般都是href="/p-286018571.html"我们只要能提取到所有的"/p-XXXXXXXX.html" ...
- 连接SDE空间数据库——SQL Server篇
一.软件配置 要从 ArcMap 连接至 SQL Server 中的数据库或地理数据库,请在 ArcMap 计算机上安装 SQL Server native client 或 Microsoft OD ...
- Nginx负载均衡简易方法
做个简单的测试,一个Nginx, 通过FastCGI协议和另外两台服务器上的基于CppCMS开发的web server通信.配置方法很简单: 首先,必须在nginx.conf文件开头,server 配 ...
- MVC初识
一.MVC MVC模式(Model-View-Controller)将应用程序的实现分离的实现分离为三道不同的层: 模型层(Model): 视图层(View): 控制层(Controller): 二. ...
- iOS开发 - 获取真机沙盒数据
今天要获取之前真机測试时写入沙盒的数据, 本来以为挺麻烦的. 后来捣腾了一下, 才知道原来这么简单... 以下直接看详细步骤. 前提: 真机已经通过USB和你的电脑连接上了! 1.进入Organize ...
- 【DB2】db2常用SQL语句集合
持续更新中 1.修改日志模式为不记录 alter table table_name activate not logged initially; 2.清空表 alter table t1 activ ...
- Yum源的优先级
yum源自定义优先级,提高下载速速! 01.Install Yum Priorities Run the Yum Priorities install commandyum install yum-p ...