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。

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

  1. Sapper:迈向理想的 Web 应用框架

    ​扎稳阵脚,再进一步. 注意:原文发表于2017-12-31,随着框架不断演进,部分内容可能已不适用. 给迫不及待的小伙伴们的快速入门:Sapper 文档 和快速模板 starter template ...

  2. 基于 CSS 的 Web 框架 CJSS

    CJSS 是一个基于 CSS 的 Web 框架,所有效果都在 CSS 文件中生效,可以在 CSS 中使用它添加更多功能,或者构建一个完整的页面. 使用方法: HTML 想要使用某个组件,在 CSS 文 ...

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

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

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

    在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...

  5. Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  6. 【JavaScript】谈谈Google Polymer以及Web UI框架的未来

    摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web ...

  7. 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面

    本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...

  8. 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

    作者:编辑部的故事   <  开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!   > 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐! Tutoria ...

  9. 20款有用的JavaScript和CSS库

    Web开发与设计已经发展达到了新的高峰.创建一个网站并不是那么简单了,因为它使用的是几年前.今天是时间创造有吸引力的网站,不仅吸引了游客的关注也让他们订婚.另外,和功能的有吸引力的功能添加到该网站不应 ...

随机推荐

  1. ZooKeeper异步调用命令

    在ZooKeeper中,所有的同步调用命令,都会有一个相应的异步调用方法.异步调用能在一个单独线程中同时提交更多的命令,也能在一定程度上简化代码实现. 1 异步create方法 如创建zNode的命令 ...

  2. Node.js安装详细步骤教程(Windows版)

    什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...

  3. springboot2.X 使用spring-data组件对MongoDB做CURD

    springboot2.X 使用spring-data组件对MongoDB做CURD 使用背景 基于快速开发,需求不稳定的情况, 我决定使用MongoDB作为存储数据库,搭配使用spring-data ...

  4. Socket I/O模型之select模型

    socket网络编程中有多种常见的I/O模型: 1.blocking阻塞 2.nonblocking非阻塞 3.I/O multiplexing复用 4.signal driven 5.asynchr ...

  5. Immutable Object模式 - 多线程

    Immutable Object模式 - 多线程 前言 在多线程编程中,我们常会碰到修改一个对象的值,如果在不加锁的情况下 ,就会出现值不一致的问题,那么有没有一种方式可以不通过加锁的方式也可以保证数 ...

  6. UVALive 7264 Kejin Game 网络流+最小割

    Kejin Game 题意:一个人有一颗技能树, 现在它想修练到某个技能 (假设为x), 现在修一个技能有3种方式: 1, 将该技能的前置技能都学完了,才能学该技能. 2, 取消一个技能 与 另一个技 ...

  7. CodeForces 1082 F Speed Dial

    题目传送门 题意:现在有n个电话号码,每个电话号码为si,拨打次数为pi. 现在有k 个快捷键,每次拨打号码之前可以先按一次快捷键,然后再输入数字,现在问输入数字次数是多少.快捷键的号码可以不在电话簿 ...

  8. lightoj 1134 - Be Efficient(组合数)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1134 题解:简单的一道组合题,现求一下前缀和,然后只要找前缀和膜m的结果相同的 ...

  9. hdu 1078 FatMouse and Cheese(简单记忆化搜索)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意:给出n*n的格子,每个各自里面有些食物,问一只老鼠每次走最多k步所能吃到的最多的食物 一道 ...

  10. yzoj P2045 不老的传说 题解

    题意 类似于涂色问题,环形问题不多说,断环加倍即可,限制条件if判断就行. 解析 代码 #include<bits/stdc++.h> using namespace std; int n ...