最近在项目里面要用到JavaScript来绘制图表,JQuery的插件Flot是一个不错的选择。和我之前介绍过的D3不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。
Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3是采用SVG来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG会比较流畅。
首先介绍一下数据的格式。数据来自一个数组嵌套的JSON格式,如:
1
|
[[0, 3], [4, 8], [8, 5], [9, 13]]
|
这就给定了一个二维图上供绘制连线的几个点。
数据可以直接通过API传给Flot,让它自行决定数据展示的样子:
1
2
3
4
5
6
7
8
9
10
11
12
|
$( 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]];
var d3 = [[0, 12], [7, 12], null , [7, 2.5], [12, 2.5]];
$.plot($( "#placeholder" ), [ d1, d2, d3 ]);
});
|
这是官网上的例子,代码很简洁。从数据上看,其实是三层数组嵌套:
- 第一层是点坐标;
- 第二层是同一条线内的点序列;
- 第三层是不同的线的排列。
你可以看到这样的图案:
你也可以在数组的第三层,给定一种被称为“series”的对象,而不是单纯的数据,来指定你想要的线条的展示形式,如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
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 = [];
for ( var i = 0; i < 14; i += 0.5)
d3.push([i, Math.cos(i)]);
var d4 = [];
for ( var i = 0; i < 14; i += 0.1)
d4.push([i, Math.sqrt(i * 10)]);
var d5 = [];
for ( var i = 0; i < 14; i += 0.5)
d5.push([i, Math.sqrt(i)]);
var d6 = [];
for ( var i = 0; i < 14; i += 0.5 + Math.random())
d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
$.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 }
}
]);
|
展示成如下形式:
关于线条类型,总共有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文档,这非常有用;但是还有很多信息,是需要阅读源码获得的(特别是它的许多插件都是没有什么文档的),源代码写得很清楚。
比较有用的插件包括这几个:
这些直观的例子都可以在这里找到。
文章系本人原创,转载请注明作者和出处(http://www.raychase.net)
注:本博客已经迁移到个人站点 http://www.raychase.net/ ,欢迎大家访问收藏,本ITEye博客在数日后将不再更新。
分享到:
相关推荐
Js 绘图 Flot 示例!提供给同学们学习!
jQuery flot API文档 中文版(经整理,里面有相关参数说明,对使用jQuery flot进行图表开发有帮助)
有flot官网所有资料,包括demo,所有js以及中文翻译后的flot API,完全支持jQuery,简单易学,图形丰富充实,可作为商用。
在这个例子中,实现了通过配置文件控制图形种类,动态插入数据实现flot画图
jquery.flot.axislabels.js
flot 0.83 jquery 图表
前端项目-flot.tooltip,用于Flot图表的易于使用的工具提示
angular-flot, angular.js 和Flot图表库之间的绑定 角 flot 包装Flotcharts的一个 Angular 指令。安装这里库是作为 Bower 组件和NPM模块提供的:Bower: bower install angular-flotnpm install
flot-柱形图,自己用的flot-柱形图
Flot类库基于jQuery,支持绘制实时和可进行交互的图表
Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。
jquery.flot.time.js
flot jquerUI的一系列的集合 功能强大哇,使用的是最新的jquery库
基于jquery的图表插件, highChart,jschart,flot
jQuery flot 0.5jar包,是一个新兴的js框架,加快js在html中的编码,使js与html分离
Flot图表插件兼容几乎所有流行浏览器(包括IE6),样式美观,内附简单demo及文档使用说明,均是个人研究编写,希望对你有帮助。
js图表工具flot 没分的,上传点东西混点分
JQuery Flot 画图插件 +实例源码 使用非常方便,效果非常漂亮
里面主要是要实现flot要用到的js 以及 flot的中文api文档文件