如题,此处主要讨论网页上实现画图的技术,像java的swing,.net的chart不在今天的讨论范围。
下文中所有代码,在chrome 29.0测试通过。
代码下载:http://download.csdn.net/detail/daxiang12092205/6496059
•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效果。
SVG代码示例:
分辨率无关;基于DOM节点的API;
无须必要的HTTP请求;
注:
1、 SVG实现不管什么大小的屏幕,缩放比例或着分辨率,都不影响图形的质量。直到SVG出现之前,我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里我们可以创建各种矢量形状。
下图是它的代码,无论屏幕分辨率是多少,只要向客户端传递这些文本就可以了,比image方式节省流量。过渡到第三点。
2、每个img,都是一个需要请求的文件。如果图像用一组DOM节点来代替,可以减少额外的HTTP请求,使你的网站速度更快,对用户更加友好。一部分图表型网站,如股票、基金,采用此方案。
3、svg里每个元素都是一个对象,是DOM树的一个节点,对于其它标签通用的属性或事件,对svg包含的标签同样适用。
4、其它优点,简单交互脚本,与第二点相关,可以用JavaScript进行交互,控制某个元素的样式等。D3.js、Raphael.js库辅助。
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平台上的一个开放的图表绘制类库。
是一个标签,用来定义图形;
只是一个图形容器,必须使用脚本绘制图形;
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代码示例:
跨平台、跨浏览器的flash图表组件解决方案;
InfoSoft Global公司的一个产品,2002年发布第一个版本;
注:
1、fusion是融合的意思,chart是图表,图表融合组件;
2、InfoSoft公司是专业的flash图形方案提供商;
3、最新版本v3;
fusioncharts代码示例:
跨平台、跨浏览器的,基于flash/js的图表控件;
成立于2003年;
注:
1、最新的版本6.0支持svg,所以可以理解为它是flash、js、svg多门技术的应用;
anychart代码示例:
Sales of ACME Corp.
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
SVG
信息来源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百万个点坐标,在界面上画出这些点。它的渲染速度不是很快。
注:
1、SVG和canvas都能实现几乎相同的结果,功能也完全重复。
2、高保真度的复杂向量文档已经成为并将继续成为SVG 的最强大的功能。两个原因:保存足够多的详细的文档,提供从数据库生成形状的能力。
如 建筑图、电子图、地图。
3、CanvasAPI 允许开发人员读写像素,这里唯一的限制是速度和想象力。如图像处理,先进行像素扫描,图像二值化。
4、图表和图形需要矢量图,Canvas或SVG 都可以使用。但是,由于 SVG固有的功能,它常常是更好的选择。
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中,添加高级动画或者是交互所用的语言。如按钮,游戏,交互。
入门时间:均易上手;
开发文档与资源:中文学习资料两者相差不大,且均拥有庞大的用户群;
购买价格:企业版,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/