转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html

作者:Leonel Hilario
翻译:Terry li - GBin1.com
英文: 5 Top jQuery Chart Libraries for Interactive Charts

目前对于简单快速的开发图的需要使得大家需要找到一种相对简单的方式来开发互动的图表。jQuery和其他js类库使得我们可以更容易的在(X)HTML中访问数据的呈现。

本文中我们将介绍目前5种图表类库能够不同程度满足简答到复杂的图表展现需求。大多数都是免费或者是针对个人免费的类库。

GraphUp jQuery plugin - 15美元

Graphup是一中非常轻量级的灵活的jQuery(v1.4+)插件用来美化你的数据表。它能够使用颜色,柱状图及其气饱来有效的展现你的数据。

  • 支持众多选项 - 选择数据清除器和一个油漆工具:填充,柱状,气饱图;配置小数点(支持句号或者逗号);定制颜色表及其CSS类;更多其他
  • 轻量级 - 整个插件只有4kb
  • 可扩展 - 你可以很容易的创建你自己的清除器和油漆工具或者颜色表。而且,拥有一个callback来执行上色前对单元格的任何操作。非常灵活,无限可能!大家可以产看演示
  • 功能增强 - 你最初的表仍旧可以查看即时没有javascript
  • 文档很全 - live examples and documentation.

兼容性:Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

1. jQuery Visualize Plugin

如果你想把一张表里的内容以图形化展示出来的话,那么这个插件将是最好的展示工具。他提供了不同类型的图标比如柱状图,饼图,面积图,折线图

演示实例

支持的图表: 柱状图,饼图,面积图,折线图

系统需求:jQuery ,exanvas(已包括)

浏览器支持:IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9.
HTML5 canvas在IE中不支持但是Google维护了一个类库能将Canvas翻译成VML,这样可以允许在任意版本IE中运行

演示地址:http://www.filamentgroup.com/examples/charting_v2/index_2.php

授权类型:MIT and GPL licenses

2. Highcharts

highcharts是非常棒的一个jQuery插件,简单来说highcharts和大多数的浏览器都兼容,甚至是iphone。支持很多类型的图表。并且是动态的插件,你可以轻松在创建图表后添加,删除,修改数列,轴或者点,并且可以从外部加载文件数据,同时支持提示条,这样你可以轻松的查看图表中的详细内容。最后还支持缩放和翻转。

演示实例

支持的图表: 柱状图,饼图,面积图,折线图,样条图,圆柱图,散点图,Areaspline

系统需求:jQuery 或者 MooTools

浏览器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, IPhone!

演示地址:http://www.highcharts.com/demo/

授权类型:Creative Commons Attribution  Non-Commercial 3.0 License. 学校,非盈利组织及其个人免费使用。商业网站一个站点80美元

3. Flot

Flot的作者称它为"jQuery版的有吸引力的javascript标图",他非常简单并且实用,很容易就创建图表所有的选项都是可选的。主要得功能包括:开关系列,缩放,数据点互动,并且拥有简单的提示框

演示实例

支持的图表: 柱状图,饼图,点状图,折线图

系统需求:jQuery

浏览器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Konqueror 4+

演示地址http://people.iola.dk/olau/flot/examples/

授权类型:MIT and GPL licenses

4. jQuery Sparklines

Sparklines能够在HTML或者Javasript中生成很小的行间图表,对于显示迷你图表特别有优势。因为它只使用1行来完成图标生成。另外一个非常不过得特性是自刷新。你可以看到它的鼠标移动扑捉在线演示。

演示实例

支持的图表: 柱状图,饼图,折线图,Tristate, Bullet, Box Plot

系统需求:jQuery

浏览器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Google Chrome

演示地址: http://omnipotent.net/jquery.sparkline/

授权类型:MIT and GPL licenses

5. jqPlot

最初并没有进入我的视野,但是经过深入研究后它的确是最好的jQuery图表免费插件之一。大量的选项提供给你,你甚至可以设置阴影和拖拽操作。甚至可以自动计算趋势线。个人觉得甚至可以和highcharts媲美。

演示实例

支持的图表: 柱状图,饼图,折线图

系统需求:jQuery

浏览器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, Google Chrome

演示地址: http://www.jqplot.com/tests/

授权类型:MIT and GPL version2 licenses

文章来源: 5个最顶级jQuery图表类库插件-Charting plugin

5个最顶级jQuery图表类库插件-Charting plugin的更多相关文章

  1. 不错的jQuery图表插件 .

    很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

  2. 一款可定制的外国jQuery图表插件jqplot

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...

  3. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  4. 实时更新数据的jQuery图表插件DEMO演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery图表开源软件

    jQuery图表插件 jQchart jQchart 是一个jQuery的插件,用来绘制图表的.支持各种形状的图表. 示例代码: == Mini sample == $('#canvasMyID'). ...

  6. Jquery的部分插件

    jQuery Easing:jQuery 动画效果扩展 jQuery Migrate:jQuery 应用迁移辅助插件Modernizr:专为HTML5和CSS3开发的功能检测类库jQuery Flex ...

  7. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  9. jQuery 浮动标签插件,帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

随机推荐

  1. Android中的启动模式(下)

    在这篇文章中,我会继续跟大家分享有关于Android中启动模式的相关知识.当然,如果对这个启动模式还不完全了解或者没有听过的话,可以先看看我之前写的有关于这个知识点的入门篇Android的启动模式(上 ...

  2. 转:Singleton模式

    C++完美实现Singleton模式  转自:http://www.cppblog.com/dyj057/archive/2005/09/20/346.html boost库的Singleton的实现 ...

  3. TP学习笔记

    ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://serverNa ...

  4. shell脚本基础知识

    虽然现在能在Linux系统下生存,但是自觉效率太低,和高手有很大的差距. 这就是关于Linux的知识太过匮乏,有很多事情知道该怎么做,但是就是没法在Linux下实现,为了提升工作效率,必须要接触Lin ...

  5. retrifit

    Retrofit 特点 性能最好,处理最快 使用REST API时非常方便: 传输层默认就使用OkHttp: 支持NIO: 拥有出色的API文档和社区支持 速度上比volley更快: 如果你的应用程序 ...

  6. unity入门笔记

    我于2010年4月1日硕士毕业加入完美时空, 至今5年整.刚刚从一家公司的微端(就是端游技术+页游思想, 具体点就是c++开发, directX渲染, 资源采取所需才会下载)项目的前端主程职位离职, ...

  7. 【转】10.4新特性-ArcGIS 10.4矢量切片介绍

    原文地址:http://zhihu.esrichina.com.cn/article/567 1.矢量切片简介GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像.但是切图 ...

  8. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [saiku] 访问saiku首页的时候前后台处理流程

    这篇文章讲述:项目启动后,首次访问SAIKU的登录页,前后台分别做了什么处理 (1) 访问的到底是什么页面? 浏览器输入:localhost:8080 啪一回车 根据web访问的尿性,访问的是 ind ...

  10. 368. Largest Divisible Subset -- 找出一个数组使得数组内的数能够两两整除

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...