jQuery插件Flot学习Canvas绘制图形的原理_H5之家 - 中国HTML5教程资源分享第一站

下面给大家介绍一个非常优秀的jQuery绘制图形插件Flot,这里我整理了一些关于Canvas绘制图形的老婆子，希望本文章对各位有所帮助。

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

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

代码如下复制代码

［［0， 3］，［4， 8］，［8， 5］，［9， 13］］

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

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

代码如下复制代码

$（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 ］）; }）;

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

第一层是点坐标；

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

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

你可以看到这样的图案：

jQuery插件Flot简介学习Canvas绘制图形的原理

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

代码如下复制代码

展示成如下形式：

jQuery插件Flot简介学习Canvas绘制图形的原理

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

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

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

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

代码如下复制代码

{ position： “left”， tickFormatter： KMFormatter， show： true， labelWidth： 30， show： true}

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

jQuery插件Flot简介学习Canvas绘制图形的原理

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

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

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

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

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

区域选取的插件；

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

在智能手机中position:fixed效果不起作用了，这里我找到一个比较好的解决办法，iScroll这个js可能有朋友知道了，下面我们一起来看看iScroll解决手机浏览器position:fixed失效的问题步骤。

最近出于工作原因要做几个针对移动端的二级域网站，在以往的响应式布局经验中，手机端的浏览器都不识别CSS中的 position:fixed; 定位的。这样如果打算坚持使用APP式的顶端工作条的话我们只能使用javascript，虽然 JS 会略微提高服务器压力但也足以弥补因 position:fixed; 失效而导致的页面效果。

在此类JS中 iscroll 框架可谓专门针对这个问题而诞生，iscroll不仅弥补了position:fixed;在移动端的缺陷，同时也在框架中加入了很多弹性效果及移动端手势。

在使用中除了引用 iscroll.js 外还需要以下必要代码：

代码如下复制代码

JS部分：

function loaded() {
document.addEventListener('touchmove', function(e){ e.preventDefault(); });
myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

CSS代码部分：

#wrapper {
position:relative;
z-index:1;
}

HTML代码部分：