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,
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实现的图表效果,却各有各的优势和局限,你可以根据自身项目的需求,有选择性地使用,我们的原则就是:简单、实用、兼容性强。
猜你喜欢
- 昨天美国雅虎正式宣布网站首页的新版,这也算互联网一件大事,尤其是对设计的朋友们。而且现在的美国雅虎的情况也不是很好的情况下有大刀阔斧的进行改
- 矛盾出来了,像我们这些小作坊,基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了,我们都有这个能力进行调整。但像大公司
- 错误类型: Microsoft JET Database Engine (0x80040E10) 至少一个参数没有被指定值。 原因:在写SQ
- 内容摘要:图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的
- 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是
- 阅读上一篇:浏览器中的内存泄露 4.内存泄露的解决方案显式类型转换 首先说说最容易处理的情况 对于类型转换造成的错误,我们可以通过显式类型转
- 作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分,图标在人机交互设计中无所不在。随着人们对
- 网站上的Banner条,是网站用来作为盈利或者是发布一些重要的信息的工具。但是它又不能作为网页的主要内容,因为它的主要目的是吸引人的注意力,
- 这个目前还是有个别无法显示,翻了下msdn貌似没看到更好的解决方案,暂时放弃继续研究,有晓得完全解决的朋友不妨回复说一声。 先附bat创建畸
- 本文介绍了网页中插入视频播放的代码全集:有avi格式的视频,mpg格式,smi格式,rm格式,wmv格式,wma格式,Windows Med
- 环境Laravel 5.4原理在Laravel中,门面为应用服务容器中绑定的类提供了一个“静态”接口
- 301和302 Http状态有啥区别?301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:301 redir
- IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push、pop、shift、uns
- 这主要是因为杀毒软件将一些asp关键词当作木马特征,记录保存着,所以遇到有这个关键词,就会禁止运行或删除。解决的方法是将这些关键词给拆开。把
- number(<p>,<s>)精度p取值范围1~38有效位s取值范围-84~127最高整数位数=p-ss正数,小数点
- 经常会看到这种弹出层背景变暗的效果,感觉手痒于是自己写了一个基于jquery的弹出层类。我习惯先写好结构和样式,然后再写js交互效果。结构定
- 如下图所示:单击Edit Code打开Code信息如下:经查Data at the root level is invalid是XML文件的
- 常见的SQL问题:◆选择重复,消除重复和选择出序列有例表:empemp_no name age001 Tom 17002 Sun 14003
- 内容摘要:我们在浏览一些文章的时候,当鼠标选中一些文字的时候,就出现了一些隐藏的字符,平常是看不到的。这些干扰码一般有两种,一是随机无意义的
- 导航标签彼此互斥、完全穷尽。导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通