jQuery Flot 绘制简单折线图

最新推荐文章于 2023-05-12 14:14:26 发布

rita_99

最新推荐文章于 2023-05-12 14:14:26 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

绘制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 
  >

rita_99

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Flot 绘制简单折线图

绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在之间1divid="flot-placeholder">div>再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生 "Uncau
复制链接

扫一扫

专栏目录