在阐述一个问题的时候,绘制图表相比一堆表格数据更有说服力。如果你的网站或者博客能够在页面中加进各种直观的图表,相信一定更能抓住读者的注意力。今天,我会在这篇文章中向大家介绍20种非常实用的通过简单代码来实现在页面中加入图表的方法。
如果您觉得这篇文章对您来说有些用处的话,请在页面顶部将这篇文章推荐到 鲜果、Twitter 或者豆瓣,谢谢。

JS Charts是一个免费的基于JavaScript来生成图表的在线工具。作为使用者基本上不需要去懂如何编写脚本。用这个工具,制作图表将会变成一件轻松惬意的工作。你只需要在客户端进行操作,一般来说就是在浏览器里进行操作即可,不需要额外安装什么插件。在制作图表之前,请先在XML文档或者JavaScript文档中按照一定规则列出您要输入的数据,然后按照提示操作就可以了。

Flot是一个纯粹的绘制图表的JQuery库,Flot除了能够方便随意地绘制图表之外它的更大的特点是由于支持Java特效,使用者可以为图标增加很多特殊的效果和互动性,如图标局部缩放和鼠标跟踪等。这个插件兼容IE 6/7/8,Firefox2.x+,Safari 3.0+,Opera 9.5+ 以及 Konqueror 4.x+。

Style Chart是一种新的图表绘制工具,支持绘制者在网页中加入精密的、动态的图表。

FC_RTGraph允许使用者收集支持SNMP协议的设备所提供的数据信息,FC_RTGraph支持的数据输入格式为XML文档。FC_RTGraph实际上更广泛地应用在设备的实时监控方面。根据采集到的数据,FC_RTGraph可以将其绘制成精美而且直观的三维图表(包含柱状图、饼状图、曲线图等)。

Raphaël 是一个小型的JavaScript库,使用者用它可以很简单地制作出适合在网页上展现的矢量图表。Raphaël 支持VML格式的数据输入,目前Raphaël 支持的浏览器包括Firefox 3.0+,Safari 3.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

这个工具制作的图表互动性也很强,读者可以对图表进行缩放,以及在图标上针对某些数值进行标注或重点观察。

这是Google提供的一个非常有用的工具,使用者可以用它来将各种复杂的数据转化为简单直观的图表。Google的服务器为你的数据提供了无穷的存贮空间,你可以将数据放心地存放在Google的服务器上,随时调用并使用Google Visualization API将其绘制成图并展现在网页上。Google还提供了强大的数据分析功能,可以根据你的需要对数据进行有效的分析。

YUI Chart将你的表格数据转换成多种图表形式并将其展示在页面上,YUI Chart还支持多种页面效果,大大增强了图表的互动性和可读性。

ProtoChart是一段基于Prototype 和 Canvas的开源的图表绘制代码,这个代码跟Flot,Flotr 以及 PlotKit这几个库文件有颇深的渊源。ProtoChart支持柱状图,饼状图,曲线图等多种图表样式,它支持IE6/7, FireFox2/3 以及 Safari,它甚至还支持用户直接在iPhone浏览。

PlotKit是一个用Javascript编写的制作图表的脚本,它是从CanvasGraph改写而来,有着更好的结构,支持更多的浏览器,甚至还支持Adobe SVG Viewer。

EJSChart支持对鼠标与键盘行为的记录以及对鼠标与键盘动作的响应。EJSChart还支持图表缩放,滚动甚至局部瞄准动作。EJSChart支持的图表样式也是多种多样的。只要数据制作的时候花点心思,EJSChart绝对能够做出让你眼花缭乱的图表来。

用Flash加上一点ActionScript的帮助来绘制动态图表对专业人士来说不是难事,但是如果仅仅是制作一个比较简单的数据图还用Flash的话就太麻烦了。这时候Only Pure Css Data Chart就可以帮你解决问题了。用一段纯CSS来制作图表,也能有非常棒的效果哦。CSSGlobe有很好的教程,一步一步告诉你如何通过CSS来进行图表绘制。CSS写得好的话,你根本就不需要用到JS脚本。

fgCharting是又一个不错的jQuery插件。用这个插件你可以回执出效果相当棒的图表,由于它支持Java特效,你还可以发挥以下自己的个性对图表进行一些修饰。

JavaScript Diagram Builder也支持多种形式的图表绘制,这个工具对开发者来说有一个非常有用的功能,就是浏览器测试,它提供了不同的浏览器环境,方便你针对不同的浏览器来调试你制作出来的图表。

从名字可以很清楚的看出来Canvas 3D Graph是一个绘制三维效果图的工具,针对三维图,Canvas 3D Graph专门做了优化,所以,如果你是准备用三维图来表现你的数据的话,Canvas 3D Graph当然是首选。
Dynamic Drive Pie Graph script

看名字就可以知道Dynamic Drive Pie Graph script是用来绘制饼状图的。绘制者按照提示定义所需的参数就可以非常块地得到一个漂亮的饼状图。
Flotr Javascript Plotting Library

Flotr是由Solutoire.com的Bas Wenneker编写的。应该是由Flot演化而来。它用到了Prototype JS 库和 excanvas.js这个文件。Flotr Javascript Plotting Library支持几乎所有的浏览器并支持大量的页面效果。

Emprise JavaScript Charts的特点在于,它为制作图表的人提供版权信息和使用许可。需要对自己的图表进行版权保护的人可以试试了。
Dynamic Drive Line Graph Script

Dynamic Drive Line Graph Script跟Pie Graph script比较相似,基于DHTML的解决方案,使用者提供基本数据,剩下的活儿有系统来完成,制作出来的是一个曲线图。

JGraph跟上述的所有图表制作工具都不同,这是一个领先的开源Java可视化应用脚本,它更广泛地应用在工作流程图、设备布线图以及关系网络图之类的图表制作方面。
本文作者 Bariski, 一个在设计领域的专家。作者网址 www.Tutzone.org
30 六月 2009 at 14:51
No comment
网络资源












Leave a Reply
comments feed.