`
kc_ren
  • 浏览: 61963 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Web图形解决方案

阅读更多
Web 项目开发过程中,我们常常会使用到各类图形,如流程图,饼图,甘特图,散列图,趋势图等等,然而在浏览器中绘制这些图形却存在着一定的困难,本文就是针对这些问题,提供一些可供参考的解决方案。

Web 图表一般有以下几种做法:
1.使用客户端控件技术
2.使用服务器端生成图片
3.使用富客户端技术

使用客户端控件技术
应用微软的ActiveX 控件以及Java的applet技术对图形的支持来显示一个图表 。
这种方式显然对于客户端要求太高,插件的开发相对麻烦,随着现在主流浏览器放弃对控件的支持后,这种方式只适合一些局域网的应用,而对于因特网的环境就显得不太适合。被我们所放弃。

使用服务器端生成图片
直接在web服务器端生成好图表图片文件后发送给浏览器。

图片技术(JfreeChart)



由于浏览器绘制图形存在一定困难, 所以在服务端动态生成图片是一种较好的解决方案。
JFreeChart是JAVA平台上的一个开放的图表绘制类库。可以绘制多种图表,并且可以产生PNG和JPEG格式的输出,基本能够解决目前的图形方面的需求。

优点: 纯JAVA代码编写,服务端生成图形,减轻客户端负担。
缺点:  Web 应用时,特别是动态生成图片,会产生大量的冗余图片数据。

使用富客户端技术
根据服务器返回数据在浏览器端绘制图表,一般有以下几种方案:

VML技术

VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5。0发布的 VML其实是Word和HTML结合的产物。微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。
优点: 基于XML标准,支持高质量的矢量图形显示。 结合脚本,可以让图形产生动态的效果
缺点: 只能在IE浏览器或以IE为内核的浏览器才能用VML。

SVG 技术

SVG(可放缩的矢量图形)是W3C在2000年8月制定的一种新的二维矢量图形格式,
优点: 基于XML标准,采用文本来描述对象,具有交互X和动态X, 完全支持DOM
缺点: IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能够在IE中显示SVG格式图像。

Flash 技术 (Open Flash Chart)

Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and 。Net 来控制图表。
优点: 图形效果好,根据服务器数据生成相应的图形,可以适当编写事件处理。
缺点: 需要Flash插件支持,绘制特定的图形需要专业的flash技术支持。

Canvas 技术(Flotr)

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1。8的浏览器, Firefox 1。5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1。0也就是大家都知道的HTML 5标准规范的一部分

优点: 基于标准规范,灵活绘制各类图形。
缺点:  IE需要使用canvas.js 类支持图形的扩展。

JavaScript图形库技术 (jsgraphics)

JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形(包括三角形、矩形)。底层通过创建大量1px*1px的DIV实现,同时对于连续的像素进行了优化,尽量地减少所需的DIV,因此有较好的性能,当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。

优点: 使用 Web 的基本技术实现图形化,不需要任何的扩展或者支持。
缺点: 图形非矢量,曲线情况下平滑度不够,图形较多时性能存在一定的问题。

针对上面的提供各类方案的优缺点,以及现有掌握的技术,本人选择了 Canvas 技术,作为目前Web图形的解决方案。
分享到:
评论

相关推荐

    WEB图形化流程解决方案附源码

    在IT行业中,Web图形化流程解决方案是提升业务效率和用户交互体验的重要工具。它允许用户通过直观的图形界面设计和管理复杂的工作流程,无需深入理解底层代码。本解决方案附带源码,对于开发者来说,是一个宝贵的...

    Web会议解决方案

    Web会议解决方案是一种集成数据、语音和图像的在线通信方式,主要应用于企业和组织中,以便进行远程协作和会议。UT斯达康提供的Web会议业务凭借其强大的功能和灵活的使用方式,已经成为信息技术领域的一个重要组成...

    GoDiagram Web 3.0.3 for .NET 2.0 3.5

    总的来说,GoDiagram Web 3.0.3 提供了一整套完善的Web图形解决方案,涵盖了图形绘制、布局、交互以及数据交换等方面,是.NET开发者构建图形化Web应用的理想选择。通过熟练掌握和应用这个组件,开发者可以轻松实现...

    基于WEB的专业类图形产品绘制解决方案.pdf

    "基于WEB的专业类图形产品绘制解决方案" 本文介绍了一个基于WEB的专业类图形产品绘制解决方案,旨在满足各种行业用户的专业需求。该解决方案基于B/S架构,使用现代浏览器技术,实现了图形类产品的在线绘制和发布。 ...

    QuneeforHTML5开发手册PDF版

    资源名称:Qunee for HTML5 开发手册 PDF版 Qunee for HTML5使用HTML5技术,学习Qunee前需了解相关的背景知识,如Web,HTML5,Canvas,Javascript,CSS等,此外作为一种Web图形解决方案,Qunee有其特定的适用...

    VML.rar_VML_javascript_javascript 教程

    **四、现代Web图形解决方案** 现在,大多数现代浏览器都支持SVG,这是一种更标准化的矢量图形格式,且与CSS3和JavaScript有更好的兼容性。SVG也支持事件处理和动画,而且是跨浏览器的。因此,对于新的项目,推荐使用...

    raphael浏览器画图

    Raphaël是一款强大的JavaScript库,专为在Web浏览器中绘制矢量图形而设计。...这个库的名称"raphael-min.js"暗示了它是Rapha...通过学习和熟练使用Raphaël,开发者可以提高工作效率,创造出更多创新的Web图形解决方案。

    多比图形控件(Web版)java 版

    总结来说,"多比图形控件(Web版)Java版"是一款强大的Web矢量图形工具,它集编辑、展示、协作和数据绑定等多种功能于一体,为Web应用的图形处理提供了全面的解决方案。无论是个人创作还是团队合作,都能够大大提高...

    SVG经典入门(SVG应用指南) 完整带目录

    这些功能使得SVG不只是一种静态的图像格式,更是一种强大的Web图形解决方案。 4. 内嵌字体数据:SVG可以嵌入字体数据,这样即便用户电脑上没有安装相应的字体,也能够正确显示图形中的文字。 SVG的开发历史始于...

    推荐一款VML工具,非常好和实用

    VML(Vector Markup Language)是一种XML方言,用于在网页上描绘矢量图形。...不过,需要注意的是,随着现代浏览器对SVG的广泛支持,开发者可能需要将VML知识与SVG结合,以便创建更兼容、更广泛的Web图形解决方案。

    移动端-Web渲染解决方案.docx

    ### 移动端Web渲染解决方案概述 在当前移动互联网时代,移动端Web页面的渲染效果直接影响用户体验及产品的市场竞争力。本文档旨在探讨一种适用于移动端(尤其是针对微信环境)的Web渲染解决方案,解决设计师面临的...

    TeeChart 2012 for Intraweb 14 for Delphi XE10

    通过上述内容,我们可以看出TeeChart 2012 for Intraweb 14 for Delphi XE10是一个强大的Web图形解决方案,它简化了在Intraweb应用程序中创建交互式图表的过程,使得开发者可以更专注于数据的可视化和用户体验的提升...

    .net web 图形报表(柱图,圆图)

    ASP.NET框架提供了多种用于生成图形报表的解决方案,包括但不限于System.Drawing命名空间中的类,以及更高级的图表库如MSChart(Microsoft Chart Controls)和第三方库如DevExpress、Telerik等。这些库提供了丰富的...

    Visio Web图形

    总的来说,Visio Web图形是Web设计师和开发人员的强大辅助工具,它简化了Web设计的前期工作,帮助快速创建和迭代网站草图,无论是规划布局、梳理导航结构还是设计用户流程,都能提供高效且直观的解决方案。...

    highcharts-Web图形化插件(直接可用)

    这个"highcharts-Web图形化插件"是已经整合好的资源包,包含Highcharts和Highstock-1.2.5两个主要组件,以及各种效果的示例,方便开发者直接引用和学习。 1. **Highcharts基础**: Highcharts是一个基于JavaScript...

    FreeSWITCH IVR图形化开业工具WEB版本

    FreeSWITCH IVR图形化开发工具的Web版本是一款专为通信和呼叫中心技术爱好者设计的开源解决方案。这个工具使得创建和管理Interactive Voice Response (IVR)系统变得更加直观和简便,无需深入编程语言即可实现复杂的...

    贯通开源WEB图形与报表技术全集—part1

    开源解决方案因其灵活性、可定制性以及成本效益而受到广泛关注。本篇文章将详细探讨标题"贯通开源WEB图形与报表技术全集—part1"所涵盖的知识点,主要涉及JFreeChart、Cewolf、jCharts、iReport、JasperReports和...

    论文研究-.NET环境下两种Web报表解决方案的对比分析.pdf

    本文将对这两种方案的实现原理与过程进行探讨,并分析各自的优缺点,最终通过实际项目经验提出一个可行的Web报表解决方案。 首先,我们需要了解什么是.NET框架。.NET框架是一个由微软开发的软件框架,它用于构建和...

    WEB图形格式SVG及基于XML+XSL的动态生成技术

    ### WEB图形格式SVG及基于XML+XSL的动态生成技术 #### SVG:开启网络图形新时代 SVG(可伸缩矢量图形)作为一种新兴的网络图形格式,正逐步改变着网络图像的呈现方式。与传统的位图格式(如JPEG、GIF)相比,SVG...

Global site tag (gtag.js) - Google Analytics