flot图表的使用
Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小、执行速度快、支持的图形种类齐全, 用于一般情况绝对够用. 除此之外, Flot还有许多plugins可供使用, 用以补足Flot本身所没有的功能。
- 绘制图表
网页内容：
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>FLOT DEMO</title>
</head>
<body>
<div id="placeholder" style="height:200px;" align="center"></div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
<script type='text/javascript'>
var d=[];
for (var i=0; i<15; i++) {
d.push([i, Math.random()]);
}
$.plot($("#placeholder"), [d]);
</script>
</html>
显示效果：
- 动态图表
使用setInterval来设定图表每一秒更新一次。
网页内容：
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>FLOT DEMO</title>
</head>
<body>
<div id="placeholder" style="height:200px;" align="center"></div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
<script type='text/javascript'>
$(function(){setInterval(plot_data,1000);})
var d=[];
var i=0;
function plot_data(){
d.push([i++, Math.random()]);
if(d.length>15) d.shift();
$.plot($("#placeholder"), [d]);
if(i>60){
i=0;d=[];
}
}
</script>
</html>
显示效果：
flot图表的使用的更多相关文章
- 绘制你的第一个图表(jquery-flot-line-chart)
事前准备 首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的 ...
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- jQuery图表插件Flot中文文档
转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...
- Morris.js和flot绘制折线图的比较
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...
- 免费而优秀的图表JS插件
1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...
- HTML5优秀图表控件
不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字.在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件. 在HTML5非常流行的当 ...
- 11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...
- 基于Flot可放缩的折线图
Flot初步 Flot是一个免费开源的图标插件,可以用它开发出功能强大的图表系统.下面着重讲解在Asp.net中如何使用这个插件做出功能强大的图表应用. 关于Flot,可以在这里查看现有的例子(或者是 ...
随机推荐
- Java类的加载、链接和初始化
一.Java的类加载机制回顾与总结: 我们知道一个Java类要想运行,必须由jvm将其装载到内存中才能运行,装载的目的就是把Java字节代码转换成JVM中的java.lang.Class类的对象.这样 ...
- 转：Android设置全局变量
声明:本文转自feiyangxiaomi的博客:http://blog.csdn.net/feiyangxiaomi/article/details/9966215仅供学习使用,转载请指明原作者. 文 ...
- svn is already under version control问题解决
svn ci 时出现 xx is already under version control,然后无法提交,出现这个问题的原因是你所提交的文件或目录是其他SVN的东西,即下面有.svn的目录,需要先把 ...
- HDU 4948
题目大义: 给一张图,任意两点间有单向边,找出一种方案,使得每个新入队的点与队中的点距离<=2. 题解: 贪心,从最后入队点开始反向插入,每次找出最大入度的点入队. 只需证明最大入度点A与所有未 ...
- 函数rec_init_offsets
http://database.51cto.com/art/201303/383042.htm /*************************************************** ...
- RPi 2B Raspbian system install
/***************************************************************************** * RPi 2B Raspbian系统安装 ...
- 无线端不响应键盘事件(keydown,keypress,keyup)
今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
- Java [Leetcode 70]Climbing Stairs
题目描述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...
- ORACLE 全局索引和本地索引
Oracle数据库中,有两种类型的分区索引,全局索引和本地索引,其中本地索引又可以分为本地前缀索引和本地非前缀索引.下面就分别看看每种类型的索引各自的特点. 全局索引以整个表的数据为对象建立索引,索引 ...
- Oracle权限一览表
权限 所能实现的操作 分析 ANALYZE ANY 分析数据库中的任何表.簇或索引 审计 AUDIT ANY 审计数据库中的任何模式对象 AUDIT SYSTEM 启用与停用语句和特权的审计选项 ...