Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3是采用SVG来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG会比较流畅。

最近在项目里面要用到JavaScript来绘制图表,JQuery的插件Flot是一个不错的选择。和我之前介绍过的D3不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。

Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3是采用SVG来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG会比较流畅。

首先介绍一下数据的格式。数据来自一个数组嵌套的JSON格式,如:

  1. [[0, 3], [4, 8], [8, 5], [9, 13]]

这就给定了一个二维图上供绘制连线的几个点。

数据可以直接通过API传给Flot,让它自行决定数据展示的样子:

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

这是官网上的例子,代码很简洁。从数据上看,其实是三层数组嵌套:

第一层是点坐标;

第二层是同一条线内的点序列;

第三层是不同的线的排列。

你可以看到这样的图案:

你也可以在数组的第三层,给定一种被称为“series”的对象,而不是单纯的数据,来指定你想要的线条的展示形式,如:

  1. var d1 = [];
  2. for (var i = 0; i < 14; i += 0.5)
  3. d1.push([i, Math.sin(i)]);
  4. var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  5. var d3 = [];
  6. for (var i = 0; i < 14; i += 0.5)
  7. d3.push([i, Math.cos(i)]);
  8. var d4 = [];
  9. for (var i = 0; i < 14; i += 0.1)
  10. d4.push([i, Math.sqrt(i * 10)]);
  11. var d5 = [];
  12. for (var i = 0; i < 14; i += 0.5)
  13. d5.push([i, Math.sqrt(i)]);
  14. var d6 = [];
  15. for (var i = 0; i < 14; i += 0.5 + Math.random())
  16. d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
  17. $.plot($("#placeholder"), [
  18. {
  19. data: d1,
  20. lines: { show: true, fill: true }
  21. },
  22. {
  23. data: d2,
  24. bars: { show: true }
  25. },
  26. {
  27. data: d3,
  28. points: { show: true }
  29. },
  30. {
  31. data: d4,
  32. lines: { show: true }
  33. },
  34. {
  35. data: d5,
  36. lines: { show: true },
  37. points: { show: true }
  38. },
  39. {
  40. data: d6,
  41. lines: { show: true, steps: true }
  42. }
  43. ]);

展示成如下形式:

关于线条类型,总共有line、point、bar这三种类型可以选,当然也可以是这三种类型的组合。

对于不同坐标轴(axes)和不同坐标单位的展示,例如里面横轴表示时间,格式“yyyy/mm/dd”这样的,纵轴表示行驶的里程,格式是“xxx (km)”这样的,解决这样的问题,你需要做的是:

首先需要把所有数据数值化,就是变成纯粹的整形或者浮点型的数值,这样Flot才能识别数据的格式,例如时间就变成毫秒数,里程就变成千米数;

再自定义坐标轴展示的callback函数。例如:

  1. { position: "left", tickFormatter: KMFormatter, show: true, labelWidth: 30, show: true}

Flot是支持多x轴或者多y轴的,在这种情况下,series中只要指定了数据对应的坐标轴的序号,就可以实现多轴效果:

还有两个概念需要提及,一个是“legend”,就是展示在图中(比如上图中的左下角)或者图外面的图示,用来标识图中不同颜色的线分别表示什么含义;还有一个叫做“grid”,就是图中的网格,也包括坐标轴的刻度和图形的边框。

核心的概念就是这些,Flot的API设计得很简洁,所以需要额外学习的东西也很少,马上就可以上手使用。

具体的信息,可以阅读它的官方API文档,这非常有用;但是还有很多信息,是需要阅读源码获得的(特别是它的许多插件都是没有什么文档的),源代码写得很清楚。

比较有用的插件包括这几个:

支持图像拖拽和图像缩放的插件,这两者合并起来就可以实现像Google地图一样的功能了;

区域选取的插件

还有这个:Cross Hair,可以在图像的鼠标位置上显示一条位置竖线,便于比较相应的数值。

这些直观的例子都可以在这里找到。

原文链接:http://www.raychase.net/1119

flot示例:http://people.iola.dk/olau/flot/examples/

flot官网api文档:https://github.com/flot/flot/blob/master/API.md(英文版)

http://www.pylife.net/post/2011-12-25/11195129  中文api在线文档

jQuery插件Flot的介绍的更多相关文章

  1. jquery插件Flot的简单讲解

    只是说一下基本用法,举一两个例子,详细用法请查看官方文档 使用方法是要先引入jquery插件,然后引入flot插件. <script type="text/javascript&quo ...

  2. jQuery插件Flot实战Demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  4. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

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

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

  6. 网页引导:jQuery插件实现的页面功能介绍引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...

  7. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  8. jQuery插件实现的页面功能介绍引导页效果

    新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...

  9. 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

随机推荐

  1. OpenGL学习-------绘制简单的几何图形

    本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...

  2. Swift中自定义打印方法

    // 1.获取打印所在的文件 let file = ( #file as NSString).lastPathComponent // 2.获取打印所在的方法 let funcName = #func ...

  3. Scratch2.0例—接苹果

    Scratch2.0例—接苹果 [教学目标] 1. 学习例子,能用和构造条件 ,并把此条件插入到 中:能理解和应用,当条件成立时,不执行积木内的脚本. 2. 对比和 两个积木:前者用于无条件的重复执行 ...

  4. Tomcat 静态部署 二步特别注意

    一.修改server.xml 在Host 节点添加如下配置 <!-- path 为请求url地址 docBase 为项目文件绝对地址制定到WebContent根目录下 --> <Co ...

  5. 函数之return

    return语句用来从一个函数 返回 即跳出函数.我们也可选从函数 返回一个值 .使用字面意义上的语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 例7.7 使用字面意义上的语句 ...

  6. IO之同步、异步、阻塞、非阻塞

    Stevens在文章中一共比较了五种IO Model:    blocking IO    nonblocking IO    IO multiplexing    signal driven IO  ...

  7. (简单) HUST 1017 Exact cover , DLX+精确覆盖。

    Description There is an N*M matrix with only 0s and 1s, (1 <= N,M <= 1000). An exact cover is ...

  8. Laravel邮件发送问题小解

    在Laravel中已经有内置了发送邮件的功能,通过 Mail::send 可发送邮件,但要使用这个函数必须先进行相关配置. 在 /app/config/mail.php 中设置你的邮件参数,如下: 1 ...

  9. 502 Bad Gateway(Nginx) 查看nginx日志有如下内容

    2016/09/01 09:49:41 [error] 79464#79464: *3 user "nagios" was not found in "/usr/loca ...

  10. iOS开发——汉字转拼音

    以前有一次做一个天气预报的项目,有一个功能是输入城市名,请求该城市的天气,需要把汉字转化成拼音,比如深圳——>shenzhen,加入到参数中.当时在网上找了一下,网友给出的方法很多都用不了,现在 ...