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

9 个基于JavaScript 和 CSS 的 Web 图表框架相关推荐

  1. [轉]9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架

    http://www.cnblogs.com/biko-zc/archive/2009/09/05/1560988.html

  2. 湮灭的风流-基于JavaScript的CSS技术概览

    自从CSS出现以来,就有厂商希望CSS能够更加灵活一点,最早的CSS动态化体现为"动态表达式"(或动态属性,Dynamic attribute)的构想,动态表达式的构想也许是源自于 ...

  3. 基于Golang的http、web服务框架(SSSS)

    ssss 是基于Golang的http.web服务框架.此框架的目标并不是想做一个大而全的web容器,它主要用于开发高性能的底层http服务.没有会话管理模块,不支持正则路由.支持如下特性:MVC,类 ...

  4. 基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】

    全新 Echarts 电商平台数据可视化大屏全栈 1. 前言 五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...

  5. python web三大框架对比_Python六大框架对比,Web2py略胜一筹

    Python是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准库也是值得大家称赞的,Python甚至还自带 ...

  6. Web前端框架(JavaScript,CSS)、html组件、CSS规范与第三方库

    1.什么是前端框架 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...

  7. 零基础web前端学习之JavaScript 和css 阻塞

    web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...

  8. 基于JavaScript+css写一个简单的h5动态下雨效果

    基于JavaScript+css写一个简单的h5动态下雨效果 文章目录 什么是前端 展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端 前端它是一个工作,它的 ...

  9. 24HTML5期末大作业:XXX 网站设计——指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程 网页规

    HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划 ...

最新文章

  1. Angular No name was provided for external module 'XXX' in output.globals 错误
  2. 数据结构[单链表]操作大全(初始化,创建,插入,查询,删除,长度,输出)c++代码实现
  3. Microservice Anti-patterns
  4. 设主存容量为1MB,外存容量为400MB,计算机系统的地址寄存器有32位,那么虚拟存储器的最大容量是( )
  5. muduo学习笔记 - 第2章 线程同步精要
  6. JavaBean为什么要实现Serializable接口
  7. KVO - 观察自定义属性值
  8. group by 按什么区别_失业补助金和失业保险金有什么区别,按什么标准领?不知道亏大了...
  9. CentOS镜像中替换安装镜像的小系统的内核方法
  10. 幸运福彩3d 是什么
  11. WORD2016打印文档时,图片打印不正常的解决方法
  12. Mysql登录默认密码
  13. CST — 电磁及EMC仿真工具
  14. 修改element-ui默认的开关样式
  15. 该战斗的时候战斗,该转身的时候转身,但请保持优雅
  16. SQL*Loader-704: 内部错误: ulconnect: OCIServerAttach [0] SQL*Loader-704: Internal error ulconnect: OCI
  17. Java 并发面试题解
  18. GFlags调试堆中野指针
  19. 可汗学院为什么选择Go
  20. LeetCode算法题解 414-第三大的数

热门文章

  1. 各自然带代表植被_必备知识:植被与地理环境
  2. mysql c 多线程封装_mysqlConnectorC/C++多线程封装_MySQL
  3. c语言 判断日期时间_C语言中不得不知的那些“关键字”和“控制语句”
  4. liferay remove Your request completed successfully.
  5. CSS3给网页穿上美丽的外衣
  6. openwrt系统安装到云服务器异常,OpenWrt路由器系统下服务OpenClash 安装教程及其折腾踩坑记录...
  7. Redis 基本操作一
  8. python Demo 01 爬取大学名称
  9. 使用GBDT+LR作点击率预测
  10. Java中泛型Class T, T与Class ?