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>