`
aa8945163
  • 浏览: 276115 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Web的画图方法【转】

阅读更多
在做web开发中,经常会遇到需要画图的功能,也就是,某些数据需要通过动态的图形来表达,如股票信息、流量统计等。而这些动态的数据本身,都是通过后台或底层的接口获取的,而图形化的表达,则需要在页面中呈现。因此,很多人都遇到了这样的问题。经过搜索,发现,基于java的页面画图功能,基本可以通过俩种方式实现:jsp和javascript。通过jsp画图,目前做的比较好的,是使用开源的JFreeChart库。JFreeChart是开放源代码站点SourceForge.net上的一个JAVA项目,它主要用来各种各样的图表,这些图表包括:饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。例如:JFreeChart的主页与下载是分开的,也就是,其下载是通过sourceforge做的,而有关介绍,则在它自己的主页上:http://www.jfree.org/jfreechart/index.html下载地址:http://sourceforge.net/projects/jfreechart/具体使用方法,可以参考JFreeChart的有关文档。ibm网站上有篇文章对如何用JFreeChart来画图作了比较详细的介绍,大家可以参考参考:使用JFreeChart来创建基于WEB的图表通过javascript来进行页面画图的话,我认为做的比较好的是国外的walterzorn公司的Walter Zorn所做的一个矢量图形库:wz_jsgraphics.js ,该矢量图形库,通过与DHTML结合,可以绘制出很漂亮的各种各样的图表,而且是矢量图。有关这个图形库的介绍,大家可以直接访问这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm该图形库使用了 DHTML 和 Javascript 技术,它可以画线,圆,椭圆,折线,多边形,矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的。这个图形库的使用方法如下:1、下载并保存这个图形库到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载,将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中,如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下,记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。2、包含这个库插入下面的代码到你的 html 文件的开头部分(在 <head> 和 </head> 之间):<script type="text/javascript" src="wz_jsgraphics.js"></script>3、使用层( div 或 layer )作为画布( canvases )如果是当页面正被载入时,直接在 html 页面中绘制,那么这个步骤不是必须的。如果在页面加载完成后绘制,应该设置几个具有绝对坐标的层,作为你的画布,每一个层应该有一个唯一的 id:<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>更详细的使用方法,大家可以参考http://www.
分享到:
评论

相关推荐

    WEB画图(java)

    在Java Web开发中,"WEB画图"通常指的是在网页上进行图形绘制和交互,这主要涉及到客户端的JavaScript和服务器端的Java技术的结合。Java提供了多种方式来实现Web画图,包括使用Java Applets、JavaFX以及通过...

    一个非常实用的WEB画图控件

    这个名为“一个非常实用的WEB画图控件”的资源,显然针对的是那些需要在网页上实现图形绘制或编辑功能的开发者。它基于JAVA技术,这意味着它可以很好地融入Java服务器端的架构,同时服务于Web前端,为用户提供交互式...

    SVG-web 画图

    SVG在Web画图中扮演着重要角色,因为它支持交互性、动态效果以及响应式设计。 在"SVG-web 画图"的实现中,HTML5是基础,它提供了Canvas和SVG两种主要的图形绘制方式。Canvas适用于动态和复杂图形,而SVG则更适合...

    web画图技术(canvas,svg,fusioncharts,anychart)示例

    本示例涵盖了四种主要的Web画图技术:Canvas、SVG、FusionCharts和AnyChart,它们各自有着独特的特性和用途,对于初学者来说是非常有价值的参考资料。下面将详细阐述这四种技术以及它们的应用场景。 1. **Canvas**...

    Java Web 画图

    ### Java Web 画图:利用Java生成图片并输出到Web页面 #### 概述 在Web开发领域,动态生成图像是一种常见的需求,特别是在处理图表、验证码或是其他个性化图像的场景下。本文将深入探讨如何使用Java在Web环境中...

    蓝丽网的WEB画图工具

    在WEB页中实现画各种图形,并生成代码 无任何插件,对工作流的图形化有很好的帮助 对于学习JavaScript的同志比较有帮助 精典作品

    基于web的类似Microsoft Visio的web画图工具mxGraph

    【mxGraph:构建Web版Microsoft Visio的利器】 在当今数字化时代,图形和图表的创建已经成为日常工作和项目管理中不可或缺的一部分。传统的桌面应用程序,如Microsoft Visio,为用户提供了丰富的图形绘制功能,但...

    java web画图jar包

    Java Web画图jar包主要指的是用于在Web应用中生成图形的库,如JFreeChart,这是一个非常流行的开源Java库,用于创建高质量的图表。本文将详细介绍JFreeChart库及其在Java Web开发中的应用。 JFreeChart是Java平台上...

    activiti画图工具

    总的来说,Flowable画图工具是Flowable BPM平台的重要组成部分,它简化了业务流程的设计过程,提高了工作效率,而"flowable-ui.war"和"flowable-rest.war"文件则提供了完整的Web应用和服务接口,让开发者能够便捷地...

    WEB画图框架 draw2d

    **WEB画图框架 draw2d 深度解析** `draw2d` 是一个功能强大的JavaScript库,专门用于在Web环境中创建和编辑图形界面。它以其无需依赖VML或SVG技术,仅采用纯JavaScript实现而备受青睐。在这个详尽的解析中,我们将...

    HTML5 Canvas实现web画图之自由画笔

    "HTML5 Canvas实现web画图之自由画笔"这一主题,主要关注的是如何利用Canvas API创建一个可以在web端和手机端都能使用的自由画笔功能。 首先,Canvas是一个基于矢量图形的元素,它本身并不包含任何绘制功能,而是...

    web工作流画图界面

    本文将深入探讨使用VML(Vector Markup Language)语言和JavaScript技术实现Web画图程序的相关知识点。 首先,我们要了解VML是什么。VML,全称Vector Markup Language,是一种基于XML的矢量图形语言,主要用于在...

    颜色代码生成转换画图软件确定颜色值

    在给定的标题“颜色代码生成转换画图软件确定颜色值”中,我们可以理解为,这个工具或方法允许用户使用画图软件来直观地选择颜色,然后将选定的颜色转换为对应的代码,例如"#FFFFFF",这是一种十六进制的颜色代码,...

    ASPdotNET网页画图方法及源码.doc )

    ### ASP.NET网页画图之C#纯代码画图方法详解 #### 一、引言 在Web开发领域,有时候我们需要实现在网页上动态绘制图形的功能,例如数据可视化、图表展示等场景。对于ASP.NET开发者来说,掌握如何使用C#语言进行网页...

    3d效果web画图控件 v1.2

    一个简单的自定义画图控件,特点: 1 允许用户自定义曲折系数,调整曲线显示效果; 2 柱状图和饼图具有一定的立体效果,所谓的3D效果; 3 在数据源有一定的相似性前提下,系统自动调整图片缩放比例; 4 数据设置,合理...

    页面画图ASP.NET 画图

    如果需要自定义控件来实现更复杂的画图功能,可以继承自WebControl类,并重写OnPaint方法。 9. **性能优化** 由于GDI+在服务器端运行,大量画图操作可能影响性能。考虑使用缓存策略,或者将静态的画图结果保存为...

    c#画图webChart

    1. **柱型图**:柱型图是一种直观地比较不同类别的数值的方法。每个类别都由一个垂直柱表示,柱的高度代表该类别的数值大小。这种图表适用于展示分类数据的总体趋势。 2. **线型图**:线型图通过连续的线条连接各个...

    通过OWC进行画图以及使用方法

    本教程将重点介绍如何利用OWC进行画图,并详细讲解其使用方法。 首先,我们需要下载OWC11.exe,这是OWC的一个版本,包含了必要的DLL文件。DLL(Dynamic Link Library)是Windows操作系统中的共享库,其中封装了各种...

    js矢量画图,raphael.js使用案例,svg画图,web画图,b/s画图,网页画图

    基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。...

Global site tag (gtag.js) - Google Analytics