Anychart图表系列二之执行Flash和HTML5渲染
编程技术 / houtizong 发布于 3年前 103
- HTML5
- Flash/HTML5调用方法
- 混合渲染
今天介绍Anychart的Flash和HTML5渲染功能
Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。
这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于beta版本，只能说大多数图的HTML5效果是出来了，但是深入去研究的时候你会发现很多BUG，比如很多图不支持3D，不支持滚动条，不支持雷达图等等。
如果你希望统计图以HTML5形式渲染的话，你必须要添加AnyChartHTML5.js这样一个文件，并且在web页面中引用它，看文件名字就明白什么意思了，这个不用解释。
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渲染更多的知识可以访问官方帮助文档（这里）。
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
