flot图表的使用

最新推荐文章于 2024-08-13 08:09:29 发布

weixin_34413802

最新推荐文章于 2024-08-13 08:09:29 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/catmelo/p/4169645.html

版权

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>

显示效果：

2. 动态图表

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

显示效果：

转载于:https://www.cnblogs.com/catmelo/p/4169645.html