事前准备

首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的有气温趋势图、 股票走势图等.

基本折线图

 

绘制

绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在<body>之间

    <div id="flot-placeholder"></div>

再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生 "Uncaught Invalid dimensions for plot, width = 0, height = 0"的错误, 要特别注意!

    #flot-placeholder{

        width:350px;

        height:300px;

    }

接下来建立如下的数据数组组 变数data是数据源, 以指定x及y轴数据如[x, y], 变量dataset里是除了指定数据源外, 还指定了标签(label)名称, 若卷标名称有设定时, 图表右上方的图例才会显示.

    var data = [

        [1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370],

        [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]

    ];

    var dataset = [

        {

            label: "line1",

            data: data

        }

    ];

绘制图表时可以设定一些选项让图表看起来更完整

    var options = {

        series: {

            lines: { show: true },

            points: {

                radius: 3,

                show: true

            }

        }

    };

最后再呼叫plot函式后把图表绘制出来

    $(document).ready(function () {

        $.plot($("#flot-placeholder"), dataset, options);

    });

呼叫plot函式需要带入3个参数

$.plot(placeholder, data, options) 
1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度. 
2. data : 数据数组组, 如上面所提过的数据. 
3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等.

下面是基本折线图的完整程序代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

         <style type="text/css">

            #flot-placeholder{width:350px;height:300px;}

        </style>

        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->

        <script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery-1.8.3.min.js"></script>

        <script type="text/javascript" src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>

        <script type="text/javascript">

            var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];

            var dataset = [{label: "line1",data: data}];

            var options = {

                series: {

                    lines: { show: true },

                    points: {

                        radius: 3,

                        show: true

                    }

                }

            };

            $(document).ready(function () {

                $.plot($("#flot-placeholder"), dataset, options);

            });

        </script>

    </head>

    <body>

        <div id="flot-placeholder"></div>

    </body>

    </html>

jquery 绘图工具 flot 学习笔记

 

今天想做一个统计图表，像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-line-chart)的更多相关文章

  1. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  2. jQuery.Flot开发手记

    目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...

  3. jQuery 实现Bootstrap Chart 图表

    很多时候我们制作报表的时候需要图表,如果你使用bootstrap开发你的网站,如果你需要使用图表,那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法 1.引入c ...

  4. jquery.flot.js简介

    JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...

  5. 使用Excel绘制F分布概率密度函数图表

    使用Excel绘制F分布概率密度函数图表 利用Excel绘制t分布的概率密度函数的相同方式,可以绘制F分布的概率密度函数图表. F分布的概率密度函数如下图所示: 其中:μ为分子自由度,ν为分母自由度 ...

  6. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

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

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

  8. JQuery flot API文档 中文版

    调用plot函数的方法如下: var plot = $.plot(placeholder, data, options) 其 中placeholder可以是JQuery的对象,DOM元素或者JQuer ...

  9. jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)

    第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...

随机推荐

  1. angularjs项目的页面跳转如何实现

    链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...

  2. webpack打包调试react并使用babel编译jsx配置方法

    http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...

  3. WPF学习笔记（1）——image控件图片不显示的问题

    说明(2017-6-7 16:08:35): 1. 本来想用winform的,用winform就没这么多破事了. 2. 不过项目要用WPF,拉出一个mediaelement控件,视频正常显示. 3. ...

  4. 【转】Java中JDK和JRE的区别是什么？它们的作用分别是什么？

    原文地址:http://blog.csdn.net/qq_33642117/article/details/52143824 JDK和JRE是Java开发和运行工具,其中JDK包含了JRE,但是JRE ...

  5. C语言 · 最长公共子序列 · 最长字符序列

    算法提高篇有两个此类题目: 算法提高 最长字符序列   时间限制:1.0s   内存限制:256.0MB      最长字符序列 问题描述 设x(i), y(i), z(i)表示单个字符,则X={x( ...

  6. Java多线程编程中Future模式的详解<转>

    Java多线程编程中,常用的多线程设计模式包括:Future模式.Master-Worker模式.Guarded Suspeionsion模式.不变模式和生产者-消费者模式等.这篇文章主要讲述Futu ...

  7. Entity Framework 动态构造Lambda表达式Expression<Func<T, bool>>

    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...

  8. 阿里云免费SSL证书绑定+sever2012 IIS配置

    1.阿里云域名 2.点击证书 3.免费证书 4.下载证书 5.服务器-运行-mmc 进入制台程序 6.制台程序,选择菜单“文件"中的"添加/删除管理单元”-> “添加”,从“ ...

  9. Nagios系列1，选择

    Zabbix和Nagios哪个更好 zabbix: 1.分布式监控,适合于构建分布式监控系统,具有node,proxy 2种分布式模式 2.自动化功能,自动发现,自动注册主机,自动添加模板,自动添加分 ...

  10. python 核心编程 01

    特殊变量 python用下划线作为变量的前缀和后缀指定特殊变量._XXX : 不用 'from module import *' 导入, 可以认为是模块中的私有变量__XXX__ : 系统定义的名字_ ...