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

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

  1. Flot

  

  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

  

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

  3. TableToChart

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

  4. PlotKit

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

  5. Yahoo UI Charts Control

  

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

  6. ProtoChart

  

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

  7. EJSChart

  

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

  8. fgCharting

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

  9. Pure Css Data Chart

  

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

  本文国际来源:http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html

  中文翻译来源:COMSHARP CMS 官方网站

时间: 2024-09-14 19:36:35

9 个基于JavaScript 和CSS 的Web 图表框架的相关文章

抛出html5的战略地位,未来的应用基于javascript和css到底是进步还是退后?

问题描述 也许5~10年后,html5将一统江湖.届时,一般的应用程序都是基于html5+javascript+css3之类开发的,而我们现在常用的c#.java之类的面向对象语言,用途越来越小.且不论html5的战略地位,但是,这种开发模式到底是进步还是后退?以前学计算机历史的时候,老师说过,面向对象语言的出现,绝对是编程史上的一大步.封装继承,为我们重用.扩展代码提供了极其便利的途径:接口多态,为我们模块化编程提供了强有力的技术支持.于是,越来越多的面向对象语言出现,人们在此积累了大量的框架

基于Sahi和Twist搭建的Web自动化测试框架

Twist是一个基于Eclipse开发的自动化测试平台,它是ThoughtWorks公司的一款商业软件.Sahi是一个Web自动化工具,有Tyto公司创建,具有免费版和专业版两个版本.作者将在本文中简单介绍一下这两个工具,以及基于它们搭建的轻量级Web自动化测试框架,最后重点跟读者分享一些个人使用的经验和技巧. 在介绍Sahi之前,首先简单描述一下作者参与的项目.这个项目是为一家公司做商业应用的实施.由于时间紧迫,测试人员较少,大部分时间都是在针对主要功能做手工测试.为了减少一些重复的手工劳动,

一个基于JavaScript的Web绘制图表工具

问题描述 EveryChart是一个基于JavaScript的Web绘制图表工具,它的特点:无须下载任何插件,只要支持canvas的浏览器即可使用.支持动态增加节点.体积小,速度快,使用简单.面向对象架构,方便扩展.拥有详尽的中文文档和本地技术支持.多浏览器支持:IE9,IE10firfox3.x+operachromesafari希望大家帮给下意见

Pro JavaScript Techniques第七章: JavaScript与CSS

  JavaScript和CSS的交互是现代JavaScript程序设计的支柱.事实上对于所有的现代web应用程序来说,至少使用某些形式的动态交互是必须的.那么做过之后,用户可以更快地操作而更少地把时间浪费在等待页面加载上.将动态技术与第六章提出的事件方面的观念相结合,对于实现无缝而强大的用户体验是非常重要的. 层叠式样式表是用来对易用的.有吸引力的网页进行修饰和布局的事实标准,它在给用户提供最少的困难的同时为开发者提供最多的能力.当你将那一能力与JavaScript相结合时,你将能够构造强健的

本月推荐:15 个有用的 JavaScript 和 CSS 库

高质量的网页设计需要直观和用户友好的界面,而且屏幕上的元素也起着非常重要的作用.Web 设计师不断地寻找优秀代码的集合,希望能提升工作效率.但找到合适的工具库并不总是那么容易的.网络上有太多的资源可以使用,而且也是免费的,因此很难判断哪些资源比较好.这就是精心搜索并编写这个最好的库列表的原因. 无论是希望创建一个视觉上吸引人和功能强大的布局,还是需要在表单和其他区域添加屏幕上的规则和验证,你都会喜欢这个集合.这里列出的库是由具有丰富网页设计经验的专家创建的,这些库不仅是经验丰富的设计师的优秀工具

学习使用grunt来打包JavaScript和CSS程序的教程_node.js

Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理.在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能. Grunt.js是基于Node.js的自动化任务运行器.Grunt.js结合NPM的包依赖管理,完全可以媲美Maven.Grunt.js天然适合前端应用程序的构建--不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建.越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQu

由JavaScript技术实现的web小游戏(不含网游)_javascript技巧

1.Mario(游戏地址:http://jsmario.com.ar/ ) 传说中的马里奥网页版,一比一实现了红白机时代超级马里奥中所有功能 与关卡,精细程度不逊原版游戏.依 赖库:无 2 . Bunny Hunt (游戏地址: http://www.themaninblue.com/experiment/BunnyHunt/) 猎兔,一款简单耐玩的网页狩猎游戏,没有使用第三方支持库,直接利用 css 与 JavasSript 实 现.   依 赖库:无   3 . Bomberman ( 游戏

最新的Javascript和CSS应用技巧荟萃

随着前端技术的发展,javascript和css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢! CSS动画和过渡效果 随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令人惊叹的效果和体验,这里我们将挑选最棒的特效,希望大家能够从中受益

基于google map api开发web和google earth的KML地标插件

KML文件很好做,在你的google earth(以下简称GE)中选择你自己的或是别人的marker或layer,就可以保存成静态的地标或图层信息(kmz或kml格式),发送给你的朋友,用他的GE打开你的文件就可以看到你所标注的marker信息. 这些相关的文章让我迷失了好一段时间,不过,我想要的是动态的地标.类似于EEMAP那样的GE插件.下面我将讲述它的工作原理和制做方法. 先说几个概念,google map api是基于javascript+xml等技术实现的,另一款产品google ea