当前位置:首页 > 开发 > Web前端 > Html5 > 正文

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

发表于: 2013-06-25   作者:白糖_   来源:转载   浏览:
摘要: 今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起,已经逐渐开始支持各种图的HTML5渲染效果了,也就是说即使你没有安装Flash插件,只要浏览器支持HTML5,也能看到Anychart的图形(不过这些是需要做一些配置的)。 这里要提醒下大家,Anychart6.0版本对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渲染更多的知识可以访问官方帮助文档(这里)。

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基
图标题和图例在图表元素中是不可或缺的一部分,标题能表达图的意思,图例能表达图的组成。 标题 如
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
Dashboard中文释义为仪表盘、控制台,这个用词很生动,它指的是多个图组合在一起的效果,就像模具工
本章的信息量可能会很大,而且会不断更新,标题说的“增值功能”由多个小功能组成,因为每个小功能
图标题和图例在图表元素中是不可或缺的一部分,标题能表达图的意思,图例能表达图的组成。 标题 如
如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
Dashboard中文释义为仪表盘、控制台,这个用词很生动,它指的是多个图组合在一起的效果,就像模具工
本章的信息量可能会很大,而且会不断更新,标题说的“增值功能”由多个小功能组成,因为每个小功能
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号