怎样使用绘制HTML5图表和图形库Flotr2

最新推荐文章于 2021-06-09 11:38:54 发布

html5开发技术

最新推荐文章于 2021-06-09 11:38:54 发布

阅读量1.4k

点赞数

分类专栏： html5技术开发文章标签： HTML5 html5技术开发 html5技术 html5学习

本文链接：https://blog.csdn.net/u011126789/article/details/9169123

版权

html5技术开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

给大家介绍一下怎样使用绘制HTML5图表和图形库Flotr2，我们知道Flotr2是一个绘制HTML5图表和图形库。改进flotr的一个分支。

<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/static/js/flotr2.min.js"></script>
    <script type="text/javascript">
      (function () {
 
        var
          container = document.getElementById('container'),
          start = (new Date).getTime(),
          data, graph, offset, i;
 
        // Draw a sine curve at time t
        function animate (t) {
 
          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;
 
          // Sample the sine function
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }
 
          // Draw Graph
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });
 
          // Animate
          setTimeout(function () {
            animate((new Date).getTime());
          }, 50);
        }
 
        animate(start);
      })();
    </script>
  </body>
</html>

html5开发技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎样使用绘制HTML5图表和图形库Flotr2

给大家介绍一下怎样使用绘制HTML5图表和图形库Flotr2，我们知道Flotr2是一个绘制HTML5图表和图形库。改进flotr的一个分支。 body { margin: 0px; padding: 0px; } #container { width : 600px;
复制链接

扫一扫