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

今天介绍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渲染更多的知识可以访问官方帮助文档（这里）。