02 三 09 6个jQuery图表的Web扩展应用

随着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

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实现的图表效果，却各有各的优势和局限，你可以根据自身项目的需求，有选择性地使用，我们的原则就是：简单、实用、兼容性强。

Tags - jquery , chart , plugin , web , 扩展 , 应用

01 三 09 15个网站用户体验优化禁忌

对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。

用户体验，英文叫做User Experience，缩写为UE或者UX。一种纯主观的在用户访问一个网站或使用一个产品（服务）的过程中建立起来的心理感受。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。

1、超长的页面下载时间

如果页面下载时间超过30秒，很难有用户会喜欢你的网站。

2、无限制的使用Flash及图片

适当的用一些图片及Flash，可以增加网站的生动性，增加视觉冲击力。但无限制的使用Flash及图片，会造成页面文件超大，占用浏览者的CPU资源，并且不利于页面更新及搜索引擎对网站的抓取。企赢营销在服务企业客户时也会遇到纯Flash的整站首页网站，建议网站建设过程中要考虑视觉效果的同时，把优化的因素重视起来。

3、网站页面过长

你认为有多少浏览者有兴趣看你网页中最下面的内容，不要拿自己来作比喻，因为99%以上的人才刚学会上网。

在王建硕的一篇文章中提到：“1995年Jakob Neilson做的互联网用户调查，美国的用户在1994年的时候，只有10%的用户会拖动浏览器右边的滚动条，而绝大多数，90%的用户，打开一个网站，只看浏览第一屏看到的内容，就以为看到了全部，而不会向下滚动。”

现在中国也有这样的人，而且为数不少。在一个网站的首页，能看到第三屏内容的人只有10%以下，一个过长的网站很容易引起浏览者的视觉疲劳，更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。

4、不友好的导航

不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容。用户来到一个页面不知如何返回上一页，不知道当前页面是在哪个栏目下的，这样的网站很可能用户来了一次就不会再来了。

5、过期的信息

很久不更新的信息，很容易让浏览者感到反感，而且在心中也会对你这个网站的品牌形象大打折扣。

6、死连接或连接错误

这个就不说了，这是最基本的错误，但是好些还有这样的错误，包括新浪这种大网站。

7、孤立的页面

用户不知用什么方法返回首页，这种情况往往是出现在信息提示页或内容调查的结果页上。

8、页面没有视觉差异

页面没有视觉差异，页面设计很“平”，缺少“层次感”，缺少视觉冲击力和亮点或者视觉冲击力突出的并不是网站的主体内容。这是没有经验的设计师设计大型网站时最容易犯的错误。

把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少。页面设计要吸引并引导浏览者来观看你想推广的内容或产品，当然对网页“层次感”的
设计平不是简单的用一些纯度高的颜色来实现，要根据页面的环境及周边元素综合考虑。就象在一个黑板中画一个白点很明显，但在一个白板上画一个白点就看不清
楚了。

9、链连没有标准的表现形式

现在很多刚上网站的人还只认为有带下画线的文字才是链接，网站要有统一标准的链接表现形式，并且要和没有连接的文字有区别，要让浏览者很方便的认出哪些是连接的文字。

如果是图片加的连接要在图片下标出“点击图片见大图”，图片一定要加ALT属性。“更多”要用中文写，最好不要MORE或者标点符号代替。

10、过多的运用新技术

所谓新技术，就是只有少数人掌握的技术，虽然有可能他的视觉效果很好，功能很强大，但过多的运用新技术，就意味着你准备抛弃99%的用户。

11、缺少互动的内容

缺少互动的内容，缺少网友的参与，不能让网友表达情感和思想，注定这个网站只是个死网站。

12、过复杂的文件目录及文件名

过复杂的文件目录及文件名，不利用搜索引擎对页面的抓取，并且也不利于浏览者的记忆。几乎100%的人输入网址时会用到IE的缓存，目录和文件过于复杂，排在IE缓存很靠下的地方，你当然被第二次访问的机率小的多。

不要说什么用收藏夹，不会有超过一半的人会用收藏夹。而且象我这种收藏夹过于庞大的人，想在收藏夹里找一个网址也是比较不容易的。

13、使用框架

不建议使用框架，不为什么，就因为搜索引荐不喜欢。连Google的广告计划中，对有框架的代码都是单独的。

14、恶意插件，恶意弹出窗口

15、页面中不要过多的用_blank

过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。

Tags - user , experience , 用户体验 , taboo , 禁忌