[p]jquery, mootools, prototype 等优秀的 javascript 框架拥有各种强大的功能，包括绘制 web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 web 图表的绘制，而不必象以往那样通过复杂的 flash 技术实现。[/p] [p][/p] [p]本文介绍了9个优秀的基于 javascript 与 css 的 web 图表框架。[/p] 1. flot [p][b][img]http://bbon.cn/wp-content/uploads/2009/03/1543563jm.png[/img][/b][/p] flot 是一个纯粹的 jquery javascript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 ie6/7/8, firefox 2.x+, safari 3.0+, opera 9.5+ 以及 konqueror 4.x+。使用的是 safari 最先引入的 canvas 对象，目前所有主流浏览器都支持该对象，除了 ie, 因此在 ie中使用 javascript 进行模拟。这里有一些实例。 2. js charts [p][img]http://bbon.cn/wp-content/uploads/2009/03/1543571cf.png[/img][/p] js charts 是一个免费的基于 javascript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用xml 或 javascript 数组缓存数据。 3. tabletochart tabletochart 是一个 mootools 脚本，可以将 html table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。 4. plotkit plotkit 是一个 javascript 绘图库，支持 html canvas 标签，也支持 svg。 5. yahoo ui charts control [p][img]http://bbon.cn/wp-content/uploads/2009/03/154359ilg.png[/img][/p] yui charts control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 datasource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。 6. protochart [p][img]http://bbon.cn/wp-content/uploads/2009/03/154359h9v.png[/img][/p] protochart 是一个基于 prototype 和 canvas 标签的开源库，这个库深受 flot, flotr, plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 ie6/7, firefox 2/3 以及 safari，甚至支持 iphone. 7. ejschart [p][img]http://bbon.cn/wp-content/uploads/2009/03/154400l7x.png[/img][/p] ejschart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。 8. fgcharting fgcharting 是一个很出色的 jquery 插件，支持多种图形。 9. pure css data chart [p][img]http://bbon.cn/wp-content/uploads/2009/03/154400twr.png[/img][/p] 以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 css 实现类似的功能。cssglobe 有一个非常实用的教程帮你实现基于 css 的绘图，甚至不需要 javascript。 本文国际来源：http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html[br]中文翻译来源：comsharp cms 官方网站 [p] [/p] [p][url=http://bbon.cn/2009/03/9-%e4%b8%aa%e5%9f%ba%e4%ba%8ejavascript-%e5%92%8c-css-%e7%9a%84-web-%e5%9b%be%e8%a1%a8%e6%a1%86%e6%9e%b6.html]http://bbon.cn/2009/03/9-%e4%b8%aa%e5%9f%ba%e4%ba%8ejavascript-%e5%92%8c-css-%e7%9a%84-web-%e5%9b%be%e8%a1%a8%e6%a1%86%e6%9e%b6.html[/url][/p]