flot图表的使用

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

  1. 绘制图表

网页内容：

<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <title>FLOT DEMO</title>
  </head>

  <body>
    <div id="placeholder" style="height:200px;" align="center"></div>
  </body>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
    <script type='text/javascript'>
      var d=[];
      for (var i=0; i<15; i++) {
        d.push([i, Math.random()]);
      }
      $.plot($("#placeholder"), [d]);
    </script>
</html>

显示效果：

  1. 动态图表

使用setInterval来设定图表每一秒更新一次。

网页内容：

<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <title>FLOT DEMO</title>
  </head>

  <body>
    <div id="placeholder" style="height:200px;" align="center"></div>
  </body>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
    <script type='text/javascript'>
      $(function(){setInterval(plot_data,1000);})
      var d=[];
      var i=0;
      function plot_data(){
        d.push([i++, Math.random()]);
        if(d.length>15) d.shift();
        $.plot($("#placeholder"), [d]);
        if(i>60){
          i=0;d=[];
        }
      }
    </script>
</html>

显示效果：

posted @ 2014-12-17 16:05  catmelo  阅读(365)  评论(0)  编辑  收藏  举报