Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小、执行速度快、支持的图形种类齐全, 用于一般情况绝对够用. 除此之外, Flot还有许多plugins可供使用, 用以补足Flot本身所没有的功能。

  1. 绘制图表

网页内容：

<!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>

显示效果：

  1. 动态图表

使用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图表的使用的更多相关文章

  1. 绘制你的第一个图表(jquery-flot-line-chart)

    事前准备 首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的 ...

  2. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  3. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

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

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

  5. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

  6. 免费而优秀的图表JS插件

    1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...

  7. HTML5优秀图表控件

    不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字.在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件. 在HTML5非常流行的当 ...

  8. 11个很棒的 jQuery 图表库

    如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...

  9. 基于Flot可放缩的折线图

    Flot初步 Flot是一个免费开源的图标插件,可以用它开发出功能强大的图表系统.下面着重讲解在Asp.net中如何使用这个插件做出功能强大的图表应用. 关于Flot,可以在这里查看现有的例子(或者是 ...

随机推荐

  1. 239. Sliding Window Maximum

    题目: Given an array nums, there is a sliding window of size k which is moving from the very left of t ...

  2. shell 编程基础(1)---初识shellscript

    shellscript 是linux下强大的系统管理工具,可以通过bash命令和管道命令直接在linux系统上进行编程,所写的脚本不需要编译就可以执行,对于系统管理而言十分方便. #!/bin/bas ...

  3. OSCache 缓存技术

    前言:OSCache标记库由OpenSymphony设计,它是一种开创性的JSP定制标记应用,提供了在现有JSP页面之内实现快速内存缓冲的功能.OSCache是个一个广泛采用的高性能的J2EE缓存框架 ...

  4. trim合理和谐

    今天早上,到公司,噩耗传来.上周的上线的功能出现问题,后台mis中有数据不能保存了. 经过紧张的查找,还是我的问题.有一个查重操作,在查重前,会比对新旧值,新值顺手trim了.旧值直接保存了. 在比较 ...

  5. 面试题_48_to_65_Java 集合框架的面试题

    这部分也包含数据结构.算法及数组的面试问题 48) List.Set.Map 和 Queue 之间的区别(答案)List 是一个有序集合,允许元素重复.它的某些实现可以提供基于下标值的常量访问时间,但 ...

  6. 简单实现WPF界面控件换肤效果

    效果如下如图:选择皮肤颜色 1.首先新建一个如图界面: 选择匹夫下拉框Xaml代码如下:三种颜色选项,并触发SelectionChanged事件 <ComboBox Height="2 ...

  7. UVa 11489 (博弈) Integer Game

    一个数字能被3整除就等价于这个数的各个数字之和被3整除. 所以一开始的时候先要拿一个能使剩下的数字是3的倍数的数. 然后就一直拿0.3.6.9直到某人不能再拿为止. #include <cstd ...

  8. POJ 1276 (多重背包) Cash Machine

    题意: 有n种纸币,已知每种纸币的面值和数量,求所能凑成的不超过cash的最大总面值. 分析: 这道题自己写了一下TLE了,好可耻.. 找了份比较简洁的代码抄过来了..poj1276 #include ...

  9. BZOJ_1024_[SHOI2008]_生日快乐_(dfs)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1024 给出一个\(x*y\)的距形,要求平行于边切,最终切成\(n\)个面积相等的小距形,求长 ...

  10. Asp.Net微信登录-电脑版扫描二维码登录

    像京东,一号店等网站都实现了用微信来登录的功能,就是用手机上的微信扫一扫网站上的二维码,微信上确认后,即可自动用微信的帐号登录网站. 一.创建网站应用 在微信开放平台创建一个网站应用 https:// ...