`

Flot介绍

阅读更多

最近在项目里面要用到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]];
 
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
     
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

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

  • 第一层是点坐标;
  • 第二层是同一条线内的点序列;
  • 第三层是不同的线的排列。

你可以看到这样的图案:

Flot介绍

你也可以在数组的第三层,给定一种被称为“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 }
    }
]);

展示成如下形式:

Flot介绍

 

关于线条类型,总共有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中只要指定了数据对应的坐标轴的序号,就可以实现多轴效果:

Flot介绍

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

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

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

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

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

文章系本人原创,转载请注明作者和出处(http://www.raychase.net

注:本博客已经迁移到个人站点 http://www.raychase.net/ ,欢迎大家访问收藏,本ITEye博客在数日后将不再更新。

0
0
分享到:
评论

相关推荐

    flot_基于jQuery的插件

    API文档详尽地介绍了每个函数和配置项的作用,以及如何调用和配置。通过阅读和理解API,开发者能够更好地掌握如何创建、更新和定制图表,以及如何响应用户交互。 在实际项目中,Flot通常被用于数据分析和可视化,...

    jquery flot画图

    - ["Flot数据格式介绍 - jQuery Flot 绘图教学.htm"]:这个文档可能会深入讲解Flot接受的数据格式,以及如何正确组织数据。 通过学习和实践,你可以充分利用jQuery Flot的强大功能,轻松地在网页上绘制出各种动态和...

    jquery.flot.custom-canvas-legend:用于 Flot 的可定制 Canvas Legend 插件

    **插件介绍** `jquery.flot.custom-canvas-legend` 插件允许开发者在图表的 Canvas 元素上绘制完全可定制的图例。Canvas 是 HTML5 中的一个元素,它提供了在网页上绘制图形的能力。通过这个插件,你可以自由设计...

    Jquery统计图表

    本教程将详细介绍如何利用jQuery和Flot来实现动态、美观的统计图表。 首先,让我们了解一下jQuery。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得开发者能够更快速、...

    几种实用的JQuery图表插件

    本篇文章将详细介绍几种实用的JQuery图表插件,包括Flot、Highcharts、jquerychart和jqPlot,并提供相关资源下载和中文帮助文档。 首先,Flot是一款基于jQuery的开源图表插件,它以其轻量级和灵活性著称。Flot支持...

    js绘图_javascript_lackgu3_triednfx_js绘图api_js漂亮图形_

    以上就是关于JavaScript绘图的一些基础知识,包括Canvas API的使用、图形美化技巧,以及可能的绘图库`JSCharts3`和`flot`的简单介绍。通过学习和实践,你可以用JavaScript轻松创造出各种富有吸引力的图形和图表,为...

    Ace-admin后台管理目标介绍文档

    这篇文档详细介绍了Ace Admin 的各个模块,使得开发者可以更方便地理解和使用它。Ace Admin 的核心在于其组织良好的文件结构和丰富的功能组件,使得在开发过程中可以高效地进行代码复用和定制。 1. **样式文件**: ...

    常用的9个JavaScript图表库详解

    下面,我将详细讲解所选的9个JavaScript图表库,介绍它们的特点、使用方法和适用场景,帮助读者更好地掌握这些图表库的使用技巧。 1. Chart.js Chart.js是一个基于HTML5的开源图表库,它简单易用、高度可定制,支持...

    ace v1.4 个人汉化版

    简单介绍下Ace Admin: 1、兼容BootStrap,兼容Jquery UI。所以可以用bootstrap和jqueryui的功能。当然还有jquery了。这太省心了! 2、图标使用font awesome 3.2,可以使用字体图标,这就免去了,查找png图标的...

    15款经典图表软件推荐

    9. Flot:Flot是针对jQuery的JavaScript绘图库,以其简洁的API和良好的交互性著称,适用于线图和柱状图的绘制。 10. Sparklines:Sparklines是jQuery插件,可生成内嵌式的微型图表,适用于在有限空间内展示数据趋势...

    15款经典图表软件推荐 创建最漂亮的图表

    本文将详细介绍十五款经典图表软件,它们可以帮助你创建出既美观又实用的图表,适用于各种项目需求。 1. Fusion Charts:FusionCharts v3 提供了一种创建动画、交互式图表的方法,适合Web和企业应用。它支持多种...

    data visulize

    书中将介绍多个JavaScript库的使用,包括但不限于Flotr2、Flot、Chronoline.js、D3.js、Underscore.js和Backbone.js。这些库各有特色,例如D3.js(Data-Driven Documents)是一个非常流行的库,它允许使用HTML、SVG...

    5个最顶级jQuery图表类库插件【jquery插件库】

    本文将介绍5个顶级的jQuery图表类库插件,它们分别是GraphUp、jQuery Visualize Plugin、Highcharts、Flot和jQuery Sparklines。 1. **GraphUp jQuery plugin** GraphUp是一个轻量级的jQuery插件,适用于jQuery v...

    JavaEE企业级架构实战演练课程.pdf

    例如,学员将学习如何使用Ajax和RIA(Rich Internet Applications)技术,如Flex,改进传统Web应用,以及如何在不同终端上适配图表和报表引擎,如JFreeChart、Flot、FusionCharts和BIRT。 最后,课程还介绍了使用...

    9款很棒的网页绘制图表JavaScript框架脚本

    以下是对标题和描述中提到的9款JavaScript框架脚本的详细介绍: 1. **Flot** Flot是一个基于jQuery的纯JavaScript库,用于在客户端生成各种图表。它的特点是易于使用,提供了丰富的配置选项,以及出色的视觉效果和...

    Core Admin 后台管理模版是一款bootstrap风格的后台管理模板Core Admin。.rar

    5. **图表库集成**:通常,后台管理系统需要展示数据统计,Core Admin 集成了像Chart.js、 Morris.js 和Flot等流行的数据可视化库,可以轻松创建各种动态图表。 6. **字体图标**:使用FontAwesome或Glyphicons等...

    C语言中符号串相似度的计算方法.pdf

    下面将详细介绍C语言中符号串相似度的计算方法。 1. 引言 在C语言中,变量定义是程序执行的重要步骤。变量定义需要通过关键词说明有关信息,例如变量的存储类别和类型。学习C语言的新手可能会出现书写错误,导致...

    AdminLTE-2.4.0框架

    4. **丰富的组件**:包括但不限于图表库(如Chart.js和Flot)、小部件(如天气、日历和通知)、表单元素(如输入组、下拉菜单和日期选择器)、按钮群组、导航菜单、面包屑、面板、进度条等。这些组件可以帮助开发者...

    AdminLTE-2.3.7

    4. **组件与小部件**:内置了大量的UI组件,如通知、进度条、计数器、图表(如Chart.js和Flot)、时间线、表单元素、按钮组等,这些组件使得开发后台界面变得轻松快捷。 5. **插件集成**:集成了许多流行的...

    metronic__bootstrap后台模板

    5. **强大的插件集成**:Metronic整合了诸如jQuery UI、Kendo UI、DataTables、FullCalendar、Gauges、Flot等多种流行插件,增强了后台管理系统的功能。 6. **示例页面**:包含登录、注册、忘记密码、锁定屏幕、404...

Global site tag (gtag.js) - Google Analytics