本文将对基于JavaScript和CSS的Web图表框架进行横向对比,以便于大家选择合适的工具,方便设计工作。

jQuery, MooTools, Prototype 等优异的 JavaScript 结构具有各种强壮的功用,包含制造 Web 图表,运用这些结构以及相应插件,咱们能够十分轻松地完成曲线图,圆饼图,柱状图等 Web 图表的制造,而不用象以往那样经过杂乱的 Flash 技能完成。本文介绍了9个优异的根据 JavaScript 与 CSS 的 Web 图表结构。

1. Flot

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第1张

Flot 是一个朴实的 jQuery JavaScript 绘图库,能够在客户端即时生成图形,运用十分简略,支撑扩大缩小以及鼠标追寻等交互功用。该插件支撑 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。运用的是 Safari ***引进的 Canvas 目标,现在一切干流浏览器都支撑该目标,除了 IE, 因此在 IE中运用 JavaScript 进行模仿。这里有一些实例。

2. JS Charts

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第2张

JS Charts 是一个免费的根据 JavaScript 的图表生成器,表格制造十分简略,简直不需要编码,也不需要插件和服务器模块,运用XML 或 JavaScript 数组缓存数据。

3. TableToChart

TableToChart 是一个 MooTools 脚本,能够将 HTML Table 目标中存储的数据制造成图表。你能够运用 table 标签生成图表,柱状图,曲线图,圆饼图等。

4. PlotKit

PlotKit 是一个 JavaScript 绘图库,支撑 HTML Canvas 标签,也支撑 SVG。

5. Yahoo UI Charts Control

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第3张

YUI Charts Control 能够在网页大将表格数据转换为图表,支撑柱状图,曲线图以及圆饼图。支撑 DataSource 东西,可设置的轴,鼠标回旋扭转提示,图表组合,以及皮肤等功用。

6. ProtoChart

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第4张

ProtoChart 是一个根据 Prototype 和 Canvas 标签的开源库,这个库深受 Flot, Flotr, Plotkit 等启示,支撑曲线图,柱状图,圆饼图等,能够在同一个图表上显现多套数据,支撑可定制的图例,网格,鸿沟以及背景图。支撑 IE6/7, Firefox 2/3 以及 Safari,乃至支撑 iPhone.

7. EJSChart

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第5张

EJSChart 支撑鼠标追寻,鼠标事情,按键追寻与事情,缩放,翻滚,交互等功用,将用户体会上升到一个新高度。支撑曲线图,面积图,离散图,圆饼图,柱状图等方式,具有齐备文档的特点和办法能够协助完成很好的定制。

8. fgCharting

fgCharting 是一个很超卓的 jQuery 插件,支撑多种图形。

9. Pure Css Data Chart

根据JavaScript和CSS的Web图表结构横向比照  图表框架 CSS JavaScript 第6张

以往的数据展现往往经过 flash 完成,现在,咱们能够经过朴实的 CSS 完成相似的功用。CSSGlobe 有一个十分有用的教程帮你完成根据 CSS 的绘图,乃至不需要 JavaScript。

【修改引荐】

  1. 在JSP页面中轻松完成数据饼图
  2. 浅谈Javascript中的eval与with
  3. DIV+CSS开发过程中影响SEO的制造细节
转载请说明出处
知优网 » 根据JavaScript和CSS的Web图表结构横向比照

发表评论

您需要后才能发表评论