web画图技术（svg、canvas、fusioncharts、anychart）简介

最新推荐文章于 2024-02-29 14:52:17 发布

daxiang12092205

最新推荐文章于 2024-02-29 14:52:17 发布

阅读量1.3w

点赞数 1

分类专栏：前端文章标签： web画图 svg canvas fusioncharts anychart

本文链接：https://blog.csdn.net/daxiang12092205/article/details/14104633

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

前言

如题，此处主要讨论网页上实现画图的技术，像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 οnlοad="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/

daxiang12092205

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
web画图技术（svg、canvas、fusioncharts、anychart）简介

一、前言如题，此处主要讨论网页上实现画图的技术，像java的swing，.net的chart不在今天的讨论范围。二、讲啥•SVG简介•主流的画图方式？•各方式之间的差异？三、SVG3.1 SVG简介定义ScalableVector Graphics，可伸缩矢量图形；它是使用 XML来描述二维图形和
复制链接

扫一扫