jQuery Flot 绘制简单折线图

绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在<body>之间
1
< div id = "flot-placeholder" ></ div >
再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生 "Uncaught Invalid dimensions for plot, width = 0, height = 0"的错误, 要特别注意!
1
2
3
4
#flot-placeholder{
     width : 350px ;
     height : 300px ;
}
接下来建立如下的数据数组组 变数data是数据源, 以指定x及y轴数据如[x, y], 变量dataset里是除了指定数据源外, 还指定了标签(label)名称, 若卷标名称有设定时, 图表右上方的图例才会显示.
1
2
3
4
5
6
7
8
9
10
11
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
     }
];
绘制图表时可以设定一些选项让图表看起来更完整
1
2
3
4
5
6
7
8
9
var options = {
     series: { 
         lines: { show: true },     
         points: {
             radius: 3,
             show: true
         }
     }
};
最后再呼叫plot函式后把图表绘制出来
1
2
3
$(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 >

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值