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
投稿

猜你喜欢

  • python数据库编程 ODBC方式实现通讯录

    2024-01-15 10:58:01
  • python保存图片的四个常用方法

    2023-10-03 15:06:37
  • python计算机视觉OpenCV入门讲解

    2021-09-25 08:32:58
  • Linux删除系统自带版本Python过程详解

    2023-10-21 03:12:13
  • 用Python将动态GIF图片倒放播放的方法

    2023-02-17 07:39:51
  • Excel和Access之间的数据交换

    2008-11-20 16:53:00
  • Python使用pymongo库操作MongoDB数据库的方法实例

    2023-06-04 06:20:22
  • python检测空间储存剩余大小和指定文件夹内存占用的实例

    2022-10-30 06:52:51
  • 详解微信小程序文件下载--视频和图片

    2023-08-10 16:38:50
  • MySQL变量原理及应用实例

    2024-01-12 17:35:30
  • Python Parser的用法

    2022-05-23 23:53:55
  • thinkphp5上传图片及生成缩略图公共方法(分享)

    2024-06-05 15:40:11
  • Python的函数的一些高阶特性

    2022-06-04 15:06:28
  • 使用xmlhttp为网站增加股市行情查询功能

    2007-10-10 21:09:00
  • IDEA使用properties配置文件进行mysql数据库连接的教程图解

    2024-01-22 13:45:08
  • miniconda3介绍、安装以及使用教程

    2023-06-06 18:37:16
  • Pycharm创建项目时如何自动添加头部信息

    2021-06-28 18:01:14
  • 如何检测Oracle的ODBC是否连接成功?

    2009-11-24 20:31:00
  • Python中requests库的用法详解

    2022-04-12 07:05:16
  • JS+CSS实现仿雅虎另类滑动门切换效果

    2024-04-17 10:34:55
  • asp之家 网络编程 m.aspxhome.com