注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

html5图表框架系列之jquery.flot  

2014-08-23 11:23:42|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
更多内容:http://www.jqueryflottutorial.com/cn/
Flot介绍

Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小、执行速度快、支持的图形种类齐全, 用于一般情况绝对够用. 除此之外, Flot还有许多plugins可供使用, 用以补足Flot 本身所没有的功能.


如同在前面提过的部份, Flot在开发上的是相对的容易, 一个简单的折线图, 只需要写短短的20行程序, 就可以轻易的绘制出一张图表, Flot本 身所提供的API文件也很详尽, 使用者也很多, 让你在开发时碰到问题, 只要到网络上搜寻一下, 几乎都可以找到解决的答案, 在撰写本文章时, Flot的版本是0.7版, 不过作者也有持续的在开发当中, 在每个新版本里都会加入一些新的功能.

目前支持的图表类型有折线图圆饼图直条图分区图堆栈图等, 也支持实时更新图表及Ajax update图表, 只要是会javascript且对jQuery有点认识的开发者, 都可以很轻易的上手.

效能

在执行效能上, Flot可轻易绘制1,000个数据点以上的图, 即使是用在实时更新图表里, 每100毫秒重绘一次图表速度依然很快, 目前支持的浏览器 有IE、Firefox、Chrome、Safar及Opera等, 由于Flot使用HTML5 Canvas来绘制图表, 如果是使用IE8或是更早之前的版本, 可以用excanvas让IE模拟 Canvas功能, 让Flot也可以在IE8及之前的版本中使用. 此外使用Flot是完全免费的, 不管是用在商业性或是非商业性的用途上,

如何使用

在使用Flot开发前, 你必须先去下载Flot, 你可以直接到Flot官网里下载
接下来在页面的header里依照顺序加入以下档案
1
2
3
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
(若是你用IE8或是更早之前的版本的浏览器, 就必须加入excanvas.js)

接下来在<body>里加入<div>并指定id, 这将会是Flot绘制图表的地方, 若要调整图表的大小, 只要指定长度与宽度即可.
1
<div id="flot-placeholder" style="width:300px;height:150px"></div>
接下来在<head>加入以下程序代码, 即可绘制图表, 记住呼叫$.plot需要放在document.ready里, 以确保html完全载入后 Flot才开始绘图, 否则会发生不可预期的错误.
1
2
3
4
5
6
7
<script type="text/javascript">
    $(document).ready(function () {
        $.plot($("#flot-placeholder"),
               data,
               options);
    });
</script>
至于$.plot的数据格式及参数介绍, 将在下面的章节里提到.
Read more at http://www.jqueryflottutorial.com/cn/#OEy2zqiGdoj3cEDS.99


**********************************
flot的数据结构
**********************************

基本数据格式


Flot的数据格式是由多个数据序列组成的数组, 格式如下
1
[series1, series2, series3, ...]
而每个序列的数据是由x轴和y轴的数值组合而成的
1
[x, y]
综合上面的说明, Flot数据格式如下
1
2
3
var data = [
    [x1, y1], [x2, y2], [x3, y3], [x4, y4]
];
以下皆是正确的数据格式
1
2
3
4
5
6
7
8
9
var data_integer = [
    [0, 5], [1, 10], [2, 15], [3, 20]
];
var data_float = [
    [1, 5.5], [2.5, -10], [4.5, 15], [6, -20.3]
];
var data_null = [
    [1, 5.5], [2.5, null], [4.5, 15], [6, null]
];
此外x与y的值必须皆为数字格式(整数或是浮点数), 不可用字符串格式, 即使你是使用时间数据格式, 也必须将时间转换成javascript timestamps, 也就是自1/1/1970 00:00:00 UTC起计算出的毫秒数. Flot也支持null, 如果某一点数据设定为null, 该数据点就不会被绘出.

呼叫plot函式带入数据格式如下(label属性可省略, 但data属性一定要指定)
1
2
3
4
5
6
7
8
9
$.plot(placeholder,[
        {
            label: "line1",
            data: [
                [0, 5], [1, 10], [2, 15], [3, 20]
            ]
        }
    ],
    options);

        时间数据格式 若你是用时间格式做为数据的话, 必须把时间转换成javascript timestamps格式, 另外axes里的mode必须设定为"time", 并且需要加入jquery.flot.time.js插件
       以下是程序代码范例, 以x轴为时间格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var rawData = [
    [1325347200000, 60], [1328025600000, 100], [1330531200000, 15], [1333209600000, 50]
];
 
var options = {
    xaxis: {
        mode: "time"
    }
}
 
$.plot($("#placeholder"),[
        {                   
            data: rawData
        }
    ],
    options);
多组数据序列格式

       上面所提到的数据格式都是只有单组数据序列的图表, 但有很多时候我们也需要绘制多组数据序列的图表, 多组数据序列格式范例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var rawData_1 = [
    [1325347200000, 60], [1328025600000, 100], [1330531200000, 15], [1333209600000, 50]
];
 
var rawData_2 = [
    [1325347200000, 5], [1328025600000, 12], [1330531200000, 7], [1333209600000, 25]
];
 
var dataset = [
    {
        label: "Sales",
        data: rawData_1
    },
    {
        label: "Profits",
        data: rawData_2
    }
];
 
$.plot($("#placeholder"), dataset, options);
需要更多的数据序列就依序加上去
1
2
3
4
5
6
var dataset = [
    { series1 },
    { series2 },
    { series3 },
    ....
];


Read more at http://www.jqueryflottutorial.com/cn/jquery-flot-data-format.html#YpB6jpcQXPodikzT.99
  评论这张
 
阅读(467)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017