web画图技术(svg、canvas、fusioncharts、anychart)简介
2013-11-03 15:15
344 查看
前言
如题,此处主要讨论网页上实现画图的技术,像java的swing,.net的chart不在今天的讨论范围。下文中所有代码,在chrome 29.0测试通过。
代码下载:http://download.csdn.net/detail/daxiang12092205/6496059
讲啥
•SVG简介•主流的画图方式?
•各方式之间的差异?
SVG
3.1 SVG简介
定义ScalableVector Graphics,可伸缩矢量图形;
它是使用 XML来描述二维图形和绘图程序的语言;
它是一种与分辨率无关的矢量图形格式;
历史
SVG于2003年1月14日成为W3C推荐标准。
注:
1、XML,它遵循严格的XML格式定义,如在svg文件头部xml版本定义及编码定义代码上方加空行,浏览器访问时报错,提示xml定义必须在文档首部。
二维图形:svg更适合于处理平面图形。
绘图程序:建筑图,工程图,电路图,放大而不失真,这个应用是它最大的优势。是其它几种画图方式无法取代的。
2、来历,2000年的时候,网页上显示图形没有统一的标准,各个厂家的协议互不兼容,在这种情况下W3C就发起建立图像显示的标准,参加的公司有许多,包括一些大公司,比如SUN、Adobe、苹果。经过几年的努力,2011年9月,1.0版,2013年1月,1.1版,该版本正式被确立为标准。最新的是SVG2.0,草稿在今年6月份已经发布。
3、它是一个开放的标准,不仅仅是一个标签或者语言或者API,这些都是它的子集。
开放,即自由、免费地使用,与flash不同,flash是私有技术。
矢量,有大小、方向,位图,仅有大小。
位图与矢量图比较:
注:
简要说明位图、矢量的区别。
这张图片展示了位图和矢量图的区别。位图是由点构成的,矢量图则是由一些形状元素构成。
放大位图可以看到点,而放大矢量图看到的仍然是形状。演示svg illustrate效果。
3.2
为什么要用SVG
SVG代码示例:<!DOCTYPE HTML> <html> <body> <div> <svg> <text id="txt" x="20" y="20" style="fill:blue">SVG</text> </svg> </div> </body> </html>
分辨率无关;
基于DOM节点的API;
无须必要的HTTP请求;
注:
1、 SVG实现不管什么大小的屏幕,缩放比例或着分辨率,都不影响图形的质量。直到SVG出现之前,我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里我们可以创建各种矢量形状。
下图是它的代码,无论屏幕分辨率是多少,只要向客户端传递这些文本就可以了,比image方式节省流量。过渡到第三点。
2、每个img,都是一个需要请求的文件。如果图像用一组DOM节点来代替,可以减少额外的HTTP请求,使你的网站速度更快,对用户更加友好。一部分图表型网站,如股票、基金,采用此方案。
3、svg里每个元素都是一个对象,是DOM树的一个节点,对于其它标签通用的属性或事件,对svg包含的标签同样适用。
4、其它优点,简单交互脚本,与第二点相关,可以用JavaScript进行交互,控制某个元素的样式等。D3.js、Raphael.js库辅助。
3.3 如何入门
主流的画图方式
4.1 画图方式
SVG、Canvas、Fusioncharts、Anychart注:
1、web画图主要可以分为两类:
Flash:
Fusion Charts:让数据亮瞎你的眼睛;
AnyCharts:跨平台的数据可视化解决方案,6.0以前,flash+js,最新的6.0版加入svg,实现支持html5,flash+svg;
Html5:
canvas:html5新标签;svg:html老标签;
下面四个都是采用flash+js技术,fusioncharts,anychart收费,open flash chart开源且免费,有2个java版的api,其中一个是中国人写的。
JFreeChart是JAVA平台上的一个开放的图表绘制类库。
4.2 Canvas
定义是一个标签,用来定义图形;
只是一个图形容器,必须使用脚本绘制图形;
历史
Apple公司为了客户端矢量图形而设计;
Safari中绘图能力为Dashboard组件所用;
注:
1、canvas帆布、画布之意;
2、定义中的第二点大大限制了它的受欢迎程度;
3、对HTML扩展的根本原因在于,HTML 在Safari 中的绘图能力也为 Mac OS X 桌面的Dashboard 组件所使用,并且Apple希望有一种方式在Dashboard 中支持脚本化的图形。
4、canvas标记最早出现在Safari1.3中,后来Firefox 1.5 和Opera 9也开始支持,目前canvas已经成为HTML5中一个正式的标签。
Canvas代码示例:
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>
4.3 FusionCharts
定义跨平台、跨浏览器的flash图表组件解决方案;
历史
InfoSoft Global公司的一个产品,2002年发布第一个版本;
注:
1、fusion是融合的意思,chart是图表,图表融合组件;
2、InfoSoft公司是专业的flash图形方案提供商;
3、最新版本v3;
fusioncharts代码示例:
<!DOCTYPE HTML> <html> <body onload="init();"> <div id="chartContainer"></div> <script src="FusionCharts.js" type="text/javascript"></script> <script type="text/javascript"> function init() { var chart = new FusionCharts("Column3D.swf", "myChartId", "500", "300"); chart.setDataURL("date.xml"); chart.render("chartContainer"); } </script> </body> </html>
date.xml
<graph caption='每月销售额柱形图'> <set name='一月' value='462' color='AFD8F8' /> </graph>
4.4 AnyChart
定义跨平台、跨浏览器的,基于flash/js的图表控件;
历史
成立于2003年;
注:
1、最新的版本6.0支持svg,所以可以理解为它是flash、js、svg多门技术的应用;
anychart代码示例:
<!DOCTYPE HTML> <html> <head> <script src="AnyChart.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" language="javascript"> //<![CDATA[ var chart = new AnyChart("AnyChart.swf"); chart.width = 700; chart.height = 300; chart.setXMLFile("anychart.xml"); chart.write(); //]]> </script> </body> </html>
anychart.xml
<?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart plot_type="CategorizedHorizontal"> <data> <series name="Year 2003" type="Bar"> <point y="63" /> </series> </data> <chart_settings> <title> <text>Sales of ACME Corp.</text> </title> </chart_settings> </chart> </charts> </anychart>
各方式的差异
5.1 SVG vs Canvas
下表列出了 canvas 与 SVG 之间的一些不同之处。Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
注:
信息来源w3school网站。
1、2、依赖分辨率,换种说明就是不支持可伸缩性。canvas交互基于鼠标坐标,svg交互基于对象。
前两点使用canvas2.html进行演示。
3、显示文本,(100,100),canvas为文本左下角坐标,svg为文本正中间的坐标。
弱文本渲染能力?
4、svg支持格式较多,矢量图形,支持png,jpg,bmp,用一些工具甚至可以保存为svg格式的图片,如adobe illustrator。
Svg里每个元素被视为一个对象,是dom的一个节点,复杂度高意味着对dom节点进行频繁的操作,节点属性变化时,浏览器默认会重绘节点,
这样就降低了渲染速度。
通过word-wap.svg进行演示。
5、由第4点导致。且不适合进行大数据量的处理,如有1百万个点坐标,在界面上画出这些点。它的渲染速度不是很快。
5.2 SVG or Canvas
注:
1、SVG和canvas都能实现几乎相同的结果,功能也完全重复。
2、高保真度的复杂向量文档已经成为并将继续成为SVG 的最强大的功能。两个原因:保存足够多的详细的文档,提供从数据库生成形状的能力。
如 建筑图、电子图、地图。
3、CanvasAPI 允许开发人员读写像素,这里唯一的限制是速度和想象力。如图像处理,先进行像素扫描,图像二值化。
4、图表和图形需要矢量图,Canvas或SVG 都可以使用。但是,由于 SVG固有的功能,它常常是更好的选择。
5.3 FusionCharts vs AnyChart
相同点:flash图表组件,跨平台、跨浏览器,丰富的图表类型,支持html5,界面交互性、美观性,功能,详尽的文档和代码示例。
不同点:
FusionCharts专门为Python,GWT 等平台开发了插件;
FusionCharts 支持可滚动可缩放的图表;
AnyChart优势:xml接口驱动完成图表自定义;
AnyChart优势:采用ActionScript 3.0编译;
总结:
两者在图表的丰富性和样式美观性上不相上下,在功能上,FusionCharts更丰富一些,当然价格更贵。
注:
1、功能,相似。图表类型:柱形图、饼图、气泡图、雷达图。自定义显示方式和图表样式。
2、可滚动可缩放:新版的已支持触摸屏。
3、GWT,google
web工具包,使用java语言编写ajax前端,编译为优化的js。可以用它来创建UI组件,在项目中使用。重量级的工具包。
4、ajax无刷新切换图标类型,调试模式:图表出现异常时会迅速启动故障识别。
5、AnyChart,它由XML接口驱动完成图表自定义,无需修改任何Flash数据源。可以手动创建XML文件,也可以使用AnyChart自带的向导工具。
6、ActionScript是针对AdobeFlash Player而设计的一门编程语言,与javascript相似,它在 Flash内容和应用程序中实现了交互性、数据处理以及其它许多功能。
7、ActionScript与flash关系:AS就是制作flash中,添加高级动画或者是交互所用的语言。如按钮,游戏,交互。
5.4 FusionCharts or AnyChart?
入门时间:均易上手;开发文档与资源:中文学习资料两者相差不大,且均拥有庞大的用户群;
购买价格:企业版,FusionCharts 5万,AnyChart 3万,2012年8月数据;
注:
1、足够多的详细的文档,提供从数据库生成形状的能力。
2、从咱们公司看,目前基本都是使用FusionCharts。
3、FusionCharts提供源代码,AnyChart不提供,这点对国外公司可能有影响,但是对国内的公司,应该是没有影响的。大家都从网上下载了,很少有人愿意花几万人民币买几个js或swf文件。
小结
Canvas:像素操作,数据量较大;SVG:清晰度,矢量图形,个人研究;
FusionCharts:更多平台兼容,滚动及缩放;
AnyChart:xml文件,复杂flash效果;
注:
立体效果,可参考css3实现,举例。http://www.forehack.com/3d-css-cube/
相关文章推荐
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
- 常用动态web页面技术简介
- 基于Web的网络管理技术简介
- HTML5之图形绘制技术(Canvas Vs SVG)
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- 【转】基于Web技术的Outlook Add-ins开发简介
- Web开发技术的历史发展简介
- HTML5 Canvas实现web画图
- Web 字体简介: TTF, OTF, WOFF, EOT & SVG
- [转]HTML5中Canvas与SVG的画图原理比较
- 基于Web的网络管理技术简介
- 基于Web的网络管理技术简介
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- 基于Web的网络管理技术简介
- 基于Web的网络管理技术简介
- 基于Web的网络管理技术简介
- Web开发中的基本概念和用到的技术简介
- 用SVG技术实现基于Web的GIS
- 基于Web的网络管理技术简介