Anychart图表系列二之执行Flash和HTML5渲染

别告诉我有Bug 2013-06-25

今天介绍Anychart的Flash和HTML5渲染功能

  • HTML5

Anychart从6.0第一个版本起,已经逐渐开始支持各种图的HTML5渲染效果了,也就是说即使你没有安装Flash插件,只要浏览器支持HTML5,也能看到Anychart的图形(不过这些是需要做一些配置的)。

这里要提醒下大家,Anychart6.0版本对HTML5的支持还不算很成熟,目前还处于beta版本,只能说大多数图的HTML5效果是出来了,但是深入去研究的时候你会发现很多BUG,比如很多图不支持3D,不支持滚动条,不支持雷达图等等。

如果你希望统计图以HTML5形式渲染的话,你必须要添加AnyChartHTML5.js这样一个文件,并且在web页面中引用它,看文件名字就明白什么意思了,这个不用解释。

  • Flash/HTML5调用方法

Anychart默认是以Flash渲染的,如下面的代码,没有任何地方是设置Flash还是HTML5渲染,最后出来的图是Flash的。

var chart = new AnyChart('./swf/AnyChart.swf'); 
chart.width = 700; 
chart.height = 300; 
chart.setXMLFile('./anychart.xml'); 
chart.write('chartContainer');

当然你也可以显式地设置以Flash方式渲染,如下面的代码,你只需要在执行chart.write前加一句AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY即可实现

AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf');
chart.width = "100%";
chart.height = "100%";
chart.setXMLFile("anychart.xml");
chart.write("chartContainer");

同理,如果你希望只以HTML5方式渲染,则配置AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

注意以上两种配置是只以一种渲染方式生成图表。这样用户可能发现问题了:如果这样设置一点都不人性化,假设你设置了FLASH_ONLY,那么图表只会以Flash渲染,如果你并未安装flash插件则不会显示图表。很多用户期望的是:如果我的浏览器没有安装flash,则以另一种方式渲染。这样的功能,Anychart是支持的。

Anychart提供了另外两个配置来支持浏览器优先渲染某种类型,如果优先渲染的类型浏览器不支持,则渲染另一种类型。如下代码,如果在chart.write前设置了FLASH_PREFERRED,则表示如果浏览器支持flash,则优先以flash的形式渲染,如果不支持,则再使用HTML5渲染。而另一个配置SVG_PREFERRED则是与之相反:优先HTML5,如果不支持则改用flash渲染。

AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;
AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;
  • 混合渲染

那么有的人希望同一个页面某些图通过flash渲染,某些图通过HTML5渲染,这个也是可行的,如下面代码

AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;
var chart = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf');
chart.width = "100%";
chart.height = "100%";
chart.setXMLFile("anychart.xml");
chart.write("chartContainer");
		
AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;
var chart2 = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf');
chart2.width = "100%";
chart2.height = "100%";
chart2.setXMLFile("anychart.xml");
chart2.write("chartContainer2");

关于Flash/HTML5渲染更多的知识可以访问官方帮助文档(这里)。

相关推荐