强大的纯JS数据图工具-flot
webphp 13年前
<p>发现一个在网页中绘制数据图, 如曲线图, 柱状图的纯 JavaScript 工具:<a href="http://www.open-open.com/ajax/Charts.htm">flot</a>. 极度推荐啊! 有图和代码为证:</p> <p><img title="flot.png" border="0" alt="flot.png" src="https://simg.open-open.com/show/a8ace2ba45ee3c23da9bea7f057eadf8.jpg" /></p> <p>*代码附后*</p> <p>以前知道的工具有<a href="/misc/goto?guid=4958183401282618874">Open Flash Chart</a>, 还有 Google 出品的<a href="/misc/goto?guid=4958183402140726553">Google Chart Tool</a>. 两者使用不同的技术, 同时也是两种截然不同的设计理念. 相比较而言, 我更认同 Google Chart 的设计理念. 原因如下:</p> <p>Open Flash Chart 使用 Flash 来做图, 这本来也可以接受. 但是, 图形的样式必须通过一个 URL 返回的数据来指定, 而不是网页端技术.</p> <p>Google Chart Tool 使用 VML 来做图, 同时实现数据和表现的分离, 是 MVC 的思想. 这样的好处是, 同一份数据, 可以用来显示曲线图, 也可以显示成柱状图等等.</p> <p>显而易见, Open Flash Chart 的技术和理念太陈旧了, 所以不推荐使用. 但是, Google Chart Tool 也有一个重大缺陷, 就是不能离线使用. 当网络状况不好时(在中国大陆经常遇到), 就没法使用了. Google 太霸道, 也不能用.</p> <p>flot 也是 Google Chart Tool 类似的理念, 所以使用起来非常方便, 而且 demo 代码简单修改就能运行, 学习曲线非常轻松. 而且完美支持 IE6.</p> <p>附一个可以运行的 flot 例子代码, 将下面的代码保存成 a.html, 然后到 flot 网站下载 JavaScript 代码, 保证路径正确即可用浏览器打开看效果.</p> <pre class="brush:html; toolbar: true; auto-links: false;"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>flot</title> <!--[if lte IE 8]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.flot.js"></script> </head> <body> <script type="text/javascript"> <!-- var data = []; data.push({ "label": "中国", "data": [[2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]] }); $(function(){ var options = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1 } }; var placeholder = $("#placeholder"); $.plot(placeholder, data, options); }); //--> </script> <div id="placeholder" style="width:500px;height:240px"></div> </body> </html></pre> <p>flot 项目首页:<a href="/misc/goto?guid=4958183402873546867">http://code.google.com/p/flot/</a></p> <p><strong>补充:</strong> 再推荐另外一个非常不错的工具 –<a href="/misc/goto?guid=4958183403619584665">Highcharts</a>, 看起来功能更强大, 但还没调研使用是否简便.<br /> </p> <p>原文链接: <a title="http://www.ideawu.net/blog/2011/08/%e5%bc%ba%e5%a4%a7%e7%9a%84%e7%ba%afjs%e6%95%b0%e6%8d%ae%e5%9b%be%e5%b7%a5%e5%85%b7-flot.html" href="/misc/goto?guid=4958183404353938509" target="_blank">http://www.ideawu.net/blog/2011/08/%e5%bc%ba%e5%a4%a7%e7%9a%84%e7%ba%afjs%e6%95%b0%e6%8d%ae%e5%9b%be%e5%b7%a5%e5%85%b7-flot.html</a></p> <p><br /> </p>