9个基于JavaScript和CSS的Web图表框架

goodluck

<p >jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS  的 Web 图表框架。<p >jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。<p >1. Flot <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_r095xs1745377.jpg"></center><p >Flot 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE, 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。<p >2. JS Charts <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_supdah1745379.jpg"></center><p >JS Charts 是一个免费的基于 JavaScript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用XML 或 JavaScript 数组缓存数据。<p >3. TableToChart <p >TableToChart 是一个 MooTools 脚本，可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。<p >4. PlotKit <p >lotKit 是一个 JavaScript 绘图库，支持 HTML Canvas 标签，也支持 SVG。<p >5. Yahoo UI Charts Control <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_hag4sv1745381.jpg"></center><p >YUI Charts Control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 DataSource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。<p >6. ProtoChart <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_nro7dh1745383.jpg"></center><p >rotoChart 是一个基于 Prototype 和 Canvas 标签的开源库，这个库深受 Flot, Flotr, Plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 IE6/7, Firefox 2/3 以及 Safari，甚至支持 iPhone.<p >7. EJSChart <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_414bqw1745385.jpg"></center><p >EJSChart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。<p >8. fgCharting <p >fgCharting 是一个很出色的 jQuery 插件，支持多种图形。<p >9. Pure Css Data Chart <p ><center><img  src="http://www.hh010.com/upload_files/article/243/9_mkkwoj1745387.jpg"></center><p >以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图，甚至不需要 JavaScript。<p >< align=right></P><p align="center"></p></p>