flot图表的使用

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

flot图表的使用

绘制图表

网页内容：

<!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>

显示效果：

动态图表

使用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>

显示效果：

秒客网

flot图表的使用

相关文章