Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库,下面看一个简单的示例,先插入js:

<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>

如果要支持IE9以下的浏览器,您需要使用Excanvas, 一个canvas 模拟器,所以还需要加入这段标签:

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->

然后放置一个DIV:

<div id="placeholder" style="width:600px;height:300px;"></div>

接着Data:

<script type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

打开页面你就能看到这样的效果了:

这是一个简单的示例,它的特色之一是支持Ajax动态显示,请查看官方的示例,支持JSON的数据格式。同样,它也是开源的,您可以在这儿找到它的源代码 
希望对您Web开发有帮助。

jquery.flot.js简介的更多相关文章

  1. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  2. jquery.peity.js简介

    jQuery简单图表peity.js <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...

  3. jquery.easypiechart.js简介

    此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...

  4. jquery.sparkline.js简介

    jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery. ...

  5. jquery.gritter.js简介

    Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网

  6. jQuery.Flot开发手记

    目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...

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

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

  8. 当 jquery.unobtrusive-ajax.js 遇上Web API

    最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...

  9. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

随机推荐

  1. e860. 列出组件绑定的键盘键

    This example demonstrates how to list all the key bindings in a component. Text components have an a ...

  2. win10 UWP Markdown 含源码

    Windows下没有比較好的Markdown编辑器 我就自己写一个 csdn的Markdown非常好,就是我须要截图保存有麻烦 须要把我的截图保存在本地,然后上传 这个过程比較麻烦 csdn的图没法外 ...

  3. js document.activeElement及使用

    // 解决键盘弹出后挡表单的问题 // 解决键盘弹出后挡表单的问题 window.addEventListener('resize', function() { if( document.active ...

  4. EA修改生成代码的表头注释

    我们在做项目的过程中,每个代码文件都应有此文件的注释,比如说作者,文件说明等.但是如果用EA生成的代码文件的注释是纯英文的,而且有些不是我们需要显示的注释,有些我们需要显示的它又不具备.那么我们就可以 ...

  5. 内存管理 初始化(六)vmalloc_init 及 ioremap

    是不是我错了,本想这个函数会如网上所说将进行非连续内存管理的初始化,但是对于2.6.34的ARM架构而言,该函数实际完成的业务非常少. 内存管理的初始化读到此处,我感觉原有的认识存在很大缺陷: (1) ...

  6. win8 关闭防火墙

    http://jingyan.baidu.com/article/b87fe19eddb4da5218356894.html

  7. Ajax请求全局配置

    摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: // ajax 请求参数 var ajaxSetting ...

  8. Linux服务器部署 Elasticsearch 成功,本机却访问不了

    Elasticsearch版本: elasticsearch- 服务器版本: CentOS release 6.8 (Final) 问题: Linux服务器上部署了 Elasticsearch 5.5 ...

  9. Oracle的动态SQL

    例1:传递表名,和Where条件删除数据 CREATE OR REPLACE PROCEDURE raise_emp_salary (column_value NUMBER, emp_column V ...

  10. ios开发之--armv7,armv7s,arm64,i386,x86_64详解

    有时候在运行的时候,经常出现诸如i386的错误,最新一些可能会出现 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch ...