存档

文章标签 ‘图表’

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

2009年11月11日 IT北瓜 没有评论

      jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。

1. Flot

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

图1

      Flot 是一个纯粹的 jQuery JavaScript 绘图库,可以在客户端即时生成图形,使用非常简单,支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象,目前所有主流浏览器都支持该对象,除了 IE, 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。

2. JS Charts

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

      JS Charts 是一个免费的基于 JavaScript 的图表生成器,表格绘制非常简单,几乎不需要编码,也不需要插件和服务器模块,使用XML 或 JavaScript 数组缓存数据。

3. TableToChart

      TableToChart 是一个 MooTools 脚本,可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表,柱状图,曲线图,圆饼图等。

4. PlotKit

      PlotKit 是一个 JavaScript 绘图库,支持 HTML Canvas 标签,也支持 SVG。

5. Yahoo UI Charts Control

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

      YUI Charts Control 可以在网页上将表格数据转换为图表,支持柱状图,曲线图以及圆饼图。支持 DataSource 工具,可设置的轴,鼠标盘旋提示,图表组合,以及皮肤等功能。

6. ProtoChart

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

      ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库,这个库深受 Flot, Flotr, Plotkit 等启发,支持曲线图,柱状图,圆饼图等,可以在同一个图表上显示多套数据,支持可定制的图例,网格,边界以及背景图。支持 IE6/7, Firefox 2/3 以及 Safari,甚至支持iPhone.

7. EJSChart

      EJSChart 支持鼠标追踪,鼠标事件,按键追踪与事件,缩放,滚动,交互等功能,将用户体验上升到一个新高度。支持曲线图,面积图,离散图,圆饼图,柱状图等形式,拥有完备文档的属性和方法可以帮助实现很好的定制。

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

8. fgCharting

      fgCharting 是一个很出色的 jQuery 插件,支持多种图形。

9. Pure Css Data Chart

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

      以往的数据展示往往通过 flash 实现,现在,我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图,甚至不需要 JavaScript。

        本文转自:锐商企业 官方网站
      原文地址:http://www.comsharp.com/GetKnowledge.aspx?Culture=zh-CN&ActivePageMenuName=TeamBlogTimothyPage&KnowledgeID=751&PrintFriendly=true&Keyword=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