web画图技术(svg、canvas、fusioncharts、anychart)简介

前言

       如题,此处主要讨论网页上实现画图的技术,像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是私有技术。

矢量,有大小、方向,位图,仅有大小。

位图与矢量图比较:

web画图技术(svg、canvas、fusioncharts、anychart)简介_第1张图片

注:

简要说明位图、矢量的区别。

这张图片展示了位图和矢量图的区别。位图是由点构成的,矢量图则是由一些形状元素构成。

放大位图可以看到点,而放大矢量图看到的仍然是形状。演示svg illustrate效果。

3.2 为什么要用SVG

SVG代码示例:




	
SVG

分辨率无关;

基于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代码示例:



	

	


web画图技术(svg、canvas、fusioncharts、anychart)简介_第2张图片

4.3 FusionCharts

  定义

跨平台、跨浏览器的flash图表组件解决方案;

  历史

InfoSoft Global公司的一个产品,2002年发布第一个版本;

注:

1、fusion是融合的意思,chart是图表,图表融合组件;

2、InfoSoft公司是专业的flash图形方案提供商;

3、最新版本v3;

fusioncharts代码示例:





date.xml

   
web画图技术(svg、canvas、fusioncharts、anychart)简介_第3张图片

4.4 AnyChart

 定义

跨平台、跨浏览器的,基于flash/js的图表控件;

 历史

    成立于2003年;

注:

1、最新的版本6.0支持svg,所以可以理解为它是flash、js、svg多门技术的应用;

anychart代码示例:








    


anychart.xml




  
    
      
        
          
        
      
      
        
          <text>Sales of ACME Corp.</text>
        
      
    
  
web画图技术(svg、canvas、fusioncharts、anychart)简介_第4张图片

各方式的差异

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

web画图技术(svg、canvas、fusioncharts、anychart)简介_第5张图片 web画图技术(svg、canvas、fusioncharts、anychart)简介_第6张图片

注:

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、可滚动可缩放:新版的已支持触摸屏。

3GWTgoogle web工具包,使用java语言编写ajax前端,编译为优化的js。可以用它来创建UI组件,在项目中使用。重量级的工具包。

4ajax无刷新切换图标类型,调试模式:图表出现异常时会迅速启动故障识别。

5AnyChart,它由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/

你可能感兴趣的:(前端)