Flotr2 开源的HTML5图表制作组件介绍

2013-12-31阅读(6185)评论(0)牵着狗狗看MM

苏州实时公交查询

1
Flotr2是HTML5绘制图表和图形库

特性

  • 移动支持
  • 独立框架
  • 可扩展的插件框架
  • 自定义图表类型
  • 支持FF, Chrome, IE6+, Android, iOS

用法

要使用Flotr2,在你的页面中包含flotr2.min.js,并创建一个可见的div正宽度和高度。

DEMO

<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="http://www.humblesoftware.com/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://www.humblesoftware.com/static/js/flotr2.min.js"></script>
    <script type="text/javascript">
      (function () {

        var
          container = document.getElementById('container'),
          start = (new Date).getTime(),
          data, graph, offset, i;

        // 在时间t绘制一条正弦曲线
        function animate (t) {

          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;

          // 采样正弦函数
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }

          // 绘制图表
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });

          // 动画
          setTimeout(function () {
            animate((new Date).getTime());
          }, 50);
        }

        animate(start);
      })();
    </script>
  </body>
</html>

DEMO演示地址:http://www.w3cways.com/example?pid=1091

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Flotr2 开源的HTML5图表制作组件介绍
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏