6款jQuery图表插件[译]

来源:bbon 时间:2009-06-01 10:34:00 

随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持,除去页面中Flash的应用之外,图表应用变的越来越广泛实用。本文为你整理了6个实用性强的jQuery图表插件,概述了它们各自的功用和优势。


1,Flot

从交互性的层面来说,jQuery实现的 Flot图表和Flash实现的图表效果已经是非常的接近。图表输出效果相当的流畅光滑,注重视觉效果。你也可以和data points数据节点配合使用,当鼠标hover到某个数据节点时,会得到对应节点的数值说明内容的反馈信息。

如上图所示,你也可以选择图表的一部分内容,获得这些特殊区域的数据;同时,你还可以对数据节点进行放大处理。

优势: 线条、节点、区域填充、柱状图以及以上功能的组合。

2,Sparklines

Sparklines 是我最欣赏的微型图表实现工具。真正实现了仪表风格的图表样式(登录到你的 Google Analytics 就知道什么样子了)。另外一个好的功用就是,可以帮助在所有的图表插件中实现 self-refresh 的能力。

优势: 楔形、线条、柱状图以及以上功能的组合。

3, Google Charts Plugin

Google Charts plugin 是通过jQuery插件将Google Charts API应用到Web程序的一个非常简单的方式。同时,这个 API 本身也是非常的简单易用 。允许使用简单的jQuery调用,设置你自己需要的参数:


.attr(<span>'src'</span>, api.make(<span><strong>{</strong></span>data : [[<span>153</span>, <span>60</span>, <span>52</span>], [<span>113</span>, <span>70</span>, <span>60</span>], [<span>120</span>, <span>80</span>, <span>40</span>]]<strong>}</strong>))

优势: 柱状图、重叠柱状图、线条、楔形、3D楔形。

4,

jQuery Chart 0.21

0.21

jQuery Chart 0.21看起来似乎并不是一个特别好看的图表插件。实现的也是基本的功能,但它的使用却是非常灵活、易用的。

实例(添加值给图表)


.chartAdd({”label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})

优势: 区块、线条、柱状图以及以上功能的组合。

5,jQchart

jQchart 可以实现在图表中的拖拽动作和动画转换功能。如果你的CSS应用够好,可以实现外观不错的图表效果。与其他插件相比,jQchart的实现功能似乎有些单一。

优势: 柱状图、线条

6,TufteGraph

Tuftegraph 生成的柱状图漂亮精致,而且可以实现层叠效果。相比Flot 的精致小巧,Tuftegraph也可以实现自身的减压,变得更加轻便。

优势: 柱状图、重叠柱状图。

以上6中同样通过jQuery实现的图表效果,却各有各的优势和局限,你可以根据自身项目的需求,有选择性地使用,我们的原则就是:简单、实用、兼容性强。

英文:6 jQuery Chart Plugins For Your App

标签:jQuery,Mootools,图表,插件
0
投稿

猜你喜欢

  • linux下mysql命令

    2011-01-04 19:42:00
  • ASP Application 对象用户手册

    2008-10-23 13:59:00
  • asp 数据库连接函数代码

    2011-04-04 11:08:00
  • SQL Server 2000安装图解教程

    2009-09-09 19:59:00
  • 盲人站长深恶痛绝的onfocus=”this.blur()”

    2011-04-22 12:25:00
  • SQL server高级应用 收藏版

    2012-10-07 11:04:06
  • 设计和企业文化

    2009-03-28 10:35:00
  • 微软建议的ASP性能优化28条守则(2)

    2008-02-22 17:02:00
  • Access与Flash的结合应用

    2008-11-20 16:44:00
  • Typecho插件实现添加文章目录的方法详解

    2023-05-25 07:19:04
  • 利用sql函数生成不重复的订单号的代码

    2012-01-05 19:02:55
  • 用Dreamweaver实现Real与网页结合

    2010-07-13 12:11:00
  • asp网上购物车实例代码

    2007-10-03 13:43:00
  • 请谨慎对待程序的图标和名称

    2011-06-16 20:35:22
  • 网站细节论(1)--阅读的细节

    2007-12-21 12:16:00
  • ASP文件中的安全问题

    2011-04-14 11:15:00
  • 提高MYSQL查询效率的三个有效的尝试

    2009-02-27 16:08:00
  • 深入浅出的SQL server 查询优化

    2010-07-02 20:58:00
  • Google的YSlow——Page Speed(附插件下载)

    2009-09-27 12:40:00
  • mysql 修改表结构 判断并添加column

    2010-10-25 20:07:00
  • asp之家 网络编程 m.aspxhome.com