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

COMSHARP CMS 写道: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。

时间: 2024-11-09 07:07:20

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

基于javascript用olamisdk实现web端语音识别语义理解(speex压缩)

转载请注明原文地址:http://blog.csdn.net/ls0609/article/details/73920229 olami开放平台sdk除了支持语音识别功能外,更强大的在于支持语义理解功能,在Android平台和iOS平台都有示例demo供大家下载. 语音在线听书demo:http://blog.csdn.net/ls0609/article/details/71519203 语音记账demo:http://blog.csdn.net/ls0609/article/details/

如何在devtools中找到未使用 JavaScript 和 CSS 代码

GitHub中有更加详细的介绍 https://github.com/daLeiStrive/devtools-docs Chrome DevTools中的Coverage标签可帮助您查找未使用的JavaScript和CSS代码.删除未使用的代码可以加快页面加载速度, 图1.分析代码覆盖率. 总览 运送未使用的JavaScript或CSS是Web开发中的常见问题.例如,假设您要在页面上使用Bootstrap的按钮组件.要使用按钮组件,您需要在HTML中添加指向Bootstrap样式表的链接,如下

Java急速WEB+ORM框架(JFinal)

JFinal框架是基于java语言的急速WEB+ORM框架,其设计核心是开发迅速,代码量少,学习简单,功能强大,轻量级,已扩展,Restful.在拥有java语言所有优势的同时再拥有python,php等动态语言的开发效率,让你有足够多的时间去做其他的事. JFinal有如下主要特点: MVC架构,设计精巧,使用简单 遵循COC原则,零配置,无xml 独创Db + Record模式,灵活便利 ActiveRecord支持,使数据库开发极致快速 自动加载修改后的java文件,开发过程中无需重启we

002 web基础之手动实现简易web服务框架

目录 一.软件开发架构 二.实现一个简单的web服务 2.1 S端修正版本 2.2 S端将html标签返回 2.3 浏览器携带参数访问S端时的处理 2.4 S端返回html页面给浏览器 2.5 减少代码冗余的server端 三.基于wsgrief模块实现简易web服务框架 3.1 通过后端获取当前时间展示到前端 3.2 后端通过获取数据库的信息,展示到前端页面 一.软件开发架构 C/S 客户端 服务端 B/S 浏览器和服务端 注意:B/S 的本质也是C/S架构 二.实现一个简单的web服务 我们

构建基于JAVASCRIPT的移动WEB CMS入门——简介(转载)

构建基于JAVASCRIPT的移动WEB CMS入门——简介 发布时间:2014-07-17 14:16:18.035763 看到项目上的移动框架,网上寻找了一下,发现原来这些一开始都有.于是,找了个示例开始构建一个移动平台的CMS——墨颀 CMS,方便项目深入理解的同时,也可以自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS,发现对于使用AngluarJS以及EmberJS来说,主要的问题是要使用自己熟悉的东西没那么容易引入.而且考虑到谷歌向来对自己的项目的支持不

基于 CSS 的 Web 框架 CJSS

CJSS 是一个基于 CSS 的 Web 框架,所有效果都在 CSS 文件中生效,可以在 CSS 中使用它添加更多功能,或者构建一个完整的页面. 使用方法: HTML 想要使用某个组件,在 CSS 文件中选择它,然后添加 --html:(your markup here): h1 { --html:( This is a headline ); } 如果希望通过标签产生效果,如下 <component>My Component</component> component { --h

构建基于Javascript的移动web CMS——Hello,World

在一篇构建基于Javascript的移动web CMS入门--简介中简单的介绍了关于墨颀CMS的一些原理,其极框架组成,于是开始接着应该说明一下这个CMS是如何一步步搭建起来. RequireJS 使用 库及依赖 这里用的是bower的JS来下载库,详细可以参考一下bower install js使用bower管理js 这篇文章. 需要下载的库有 RequireJS Backbone Underscore Mustache jQuery 使用RequireJS 引用官网的示例 <!DOCTYPE

构建基于Javascript的移动web CMS——模板

在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单的放到一个能够执行的服务器环境中,也就是说我们须要一个简单的执行环境,以便于进行更有意思的东西--加入?模板. 開始之前 环境准备 类Unix系统 由于电脑上已经装有python了,这里便用python起一个简单的server,对于GNU/Linux.Mac OS等类unix系统来说,都能够这样执行: pyt

构建基于Javascript的移动web CMS——加载JSON文件

在上一篇中说到了如何创建一个Django Tastypie API给移动CMS用,接着我们似乎也应该有一个本地的配置文件用于一些简单的配置,如"获取API的URL"."产品列表"."SEO"(在一开始的时候发现这是不好的,后面又发现Google的爬虫可以运行Javascript,不过也是不推荐的.)这些东西是不太需要修改的,直接写在代码中似乎又不好,于是放到了一个叫作configure.json的文件里. RequireJS Plugins 网上