今天想做一个统计图表,像163博客的流量统计一样的,借助 flot 实现了,而且很简单。

下载 JS 文件,使用方法和 jquery 一样。
 
注意:flot是自动绘制在画布标签(canvas)内的,IE不支持,需要添加 excanvas.min.js ,此文件可以在上面给出的flot网址中下载
 
上面的两个网址已经将基础说的很清楚了。
 
示例说明:
语法: $.plot(id, data, options);
1.id :放置 canvas 的 div 的ID
2.data :数据,一般为二维数组的形式。
例如:[[x1,y1],[x2,y2],[x3,y3] , ...]
如果某个数据为空,则对应点将被忽略,且改点前后两个点将不再用直线连接。
3.options :样式,用于设置显示样式。 options 的格式:
var options = {
  lines: { show: true },
  points: { show: true },
  xaxis: { tickDecimals: 0, tickSize: 1 }
  };
参数:
 1.lines { }  显示直线
 show: true 显示
    color: "#FFFFFF" 线条颜色
   steps: true 阶梯形 
2.points { }  显示点
3.bars { } 显示直方图
4.xaxis { } 横坐标的样式
 
 
语法示例:$.plot($("#name"), [ d1,d2,d3 ]);
参数①:name 为画布所在 div 的 id 。
参数②:d2,d3 一般为数列数组 [x,y],x和y分别表示每个点的横轴和纵轴,例如可以定义如下:
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]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
flot会依据其最大值和画布大小自动设置刻度,例如设置div如下 
 <div id="placeholder" style="width:100px;height:100px;"></div>
则x方向每个像素表示 9/100=0.09 个单位,y方向每个像素表示 12/100=0.12 个单位。
 
语法示例: 
$.plot($("#placeholder"), [
    {
        data: d1,
        lines: { show: true, fill: true }
    },
    {
        data: d2,
        bars: { show: true }
    },
    {
        data: d3,
        points: { show: true }
    },
    {
        data: d4,
        lines: { show: true }
    },
    {
        data: d5,
        lines: { show: true },
        points: { show: true }
    },
    {
        data: d6,
        lines: { show: true, steps: true }
    }
]);
参数说明:lins 表示直线,参数 steps:true 表示梯形图,bars 表示直方图,points 表示点状图。与示例一比较,实例二将示例一中的数据用花括号括起,此时需要用 "data:" 指定数据源,逗号之后指定其显示样式。
 
 
例三:指定刻度显示的内容
用法实例:
$.plot($("#placeholder"), [{ label: "", data: vData}],
{
    series: { lines: { show: true }, points: { show: true} },
    xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 },  //指定固定的显示内容
    yaxis: { ticks: 5, min: 0 }  //在y轴方向显示5个刻度,此时显示内容由 flot 根据所给的数据自动判断
}
    );
其中 vData 为自定义数据
var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11, 155], [12, 155]];         
显示效果为:
关键参数为 ticks 。可以看到本例中 x轴刻度的显示内容是自己指定的,y轴让 flot 自动划分,当然也可以指定y轴。

jquery 绘图工具 flot 学习笔记的更多相关文章

  1. GNU工具链学习笔记

    GNU工具链学习笔记 1..so为动态链接库,.a为静态连接库.他们在Linux下按照ELF格式存储.ELF有四种文件类型.可重定位文件(Relocatable file,*.o,*.a),包含代码和 ...

  2. 绘图工具graphviz学习使用

    画图工具: http://www.tuicool.com/articles/r2iAfa http://www.tuicool.com/articles/RjQfey 绘图工具graphviz学习使用 ...

  3. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  4. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  5. Windows驱动开发工具 WDK 学习笔记(1)

    目标:能够把电脑当作一个集成有高性能处理器的开发板用起来,当然,还自带了一个高级的操作系统Windows(必须的).总之,就是在一个带了操作系统的高性能开发板上的驱动程序开发. 性质:纯属业余爱好 1 ...

  6. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  7. Metasploit和python两种安全工具的学习笔记

    Metasploit是个好东西 主要参考了<Metasploit渗透测试魔鬼训练营>这本书. 一.先用自己的靶机感受一下该工具的强大 linux靶机的ip如图 按照书上写的配置,如图 然后 ...

  8. Smartbi报表工具的学习笔记,如何学好报表分析?

    近期,因为工作需要,学习了一个报表工具Smartbi,这是国产BI软件,其功能还是挺强大的,并且学习成本很低,容易上手. 其实在学习Smartbi之前,我还学习了一段时间的微软BI工具sqlserve ...

  9. Linux系统最重要的工具——Shell学习笔记

    一.为什么学习Shell脚本语言 1.Shell脚本语言是实现Linux/UNIX系统管理及自动化运维必备的重要工具,Linux/UNIX系统底层及 基础应用软件的核心大都涉及Shell脚本的内容. ...

随机推荐

  1. .net Core 发布并布署到Iis

               配置 Program.cs代码 namespace WebApplication8 { public class Program { public static void Mai ...

  2. git-format-patch如何指定补丁生成的Subject格式

    答:使用-N来指定,如: git format-patch -N <commit-id> 生成的补丁中Subject将以[PATCH]的格式呈现,例如:Subject: [PATCH] a ...

  3. Codeforces Round #394 (Div. 2) E. Dasha and Puzzle(dfs)

    http://codeforces.com/contest/761/problem/E 题意:给出一棵树,现在要把这棵树上的结点放置在笛卡尔坐标上,使得每一条边与x轴平行或者与y轴平行.输出可行解,即 ...

  4. BZOJ 2333 【SCOI2011】 棘手的操作

    题目链接:棘手的操作 网上的题解大部分都是在线用可并堆艹……但是树高严格\(\log\)的可并堆我不会啊……还是离线大法好…… 我们可以先把所有的合并操作用并查集给处理好,把得到的森林记录下来.然后, ...

  5. Codeforces Round #398 (Div. 2) A,B,C,D

    A. Snacktower time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  6. shell 输入不显示在监视器上

    #!/bin/bash read -s -p "Enter your password:" pass echo "your password is $pass" ...

  7. Eclipse开发Android应用 找不到平板

    1.驱动安装正确2.平板的连接方式正确,不要用大容量存储/sd卡模式这个设置在4.3上很难找呀.设置->存储->点右上角的菜单 3.打开USB调试.4.上述问题都检查后,在eclipse里 ...

  8. 豆知识扩展:HTML<meta> tag

    豆知识: HTML<meta> tag Metadata 是关于数据的信息. The <meta> tag provides metadata关于网页.Metadat不会显示在 ...

  9. hdu5015矩阵快速幂

    参考博客:http://blog.csdn.net/rowanhaoa/article/details/39343769 反正递推关系式推了一个多小时没搞出来...太弱了 真是愧对数学系这一专业了.. ...

  10. css样式中position和_position的区别

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3IAAAEUCAIAAADhh5PYAAAgAElEQVR4nO3dPa/rNoLGcX6dW6UL+B ...