转自:http://www.cnblogs.com/smile361/archive/2012/10/31/2747614.html
在应用FusionCharts的过程中,可能会出现页面的Div层被flash遮住的情况,笔者在应用的过程中就出现过这样的情况,当时是一个日期控件被FusionCharts的flash挡住了,这个问题的解决方式其实也很简单。
我们知道要使一个普通的flash保持透明的设置是将flash的属性transparent设为wmode,但在FusionCharts中并不能直接设置统计用的flash,不过令人高兴的是,FusionCharts在它的js文件中提供了设置的地方,打开FusionCharts.js,大约在30几行的地方,可以看到类似this.addParam(‘allowScriptAccess’, ‘always’);等这样的设置例子语句,这里就是设置flash属性的地方了,加上一句:
this.addParam('wmode', 'transparent');
就行了!除此以外,我们还发现有个设置’transparent’的方法,就是
setTransparent: function(isTransparent)
同样,我们也可以通过调用setTransparent(true)来达到flash透明的目的。
div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上。
由于FusionCharts的图表都放在div中,如果页面还有其他的div,将被FusionCharts的图层挡住。不过设置z-index并不起作用,其他的div仍然被挡住。经过网络上查找,发现原来是这样的:
flash的图默认情况下总是位于最上层,参考下面的文档:
<param name="WMODE" value="transparent">
<param name="wmode" value="Opaque">
<param name="wmode" value="Window">
NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值.
window 模式
默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。
但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。
所以只要将flash的wmode设置成opaque就行了。所以在页面加载FusionCharts图表时,修改参数wmode,在页面上加载flash的js代码中加上这句 chart.addParam("wmode","Opaque");就可以了
分享到:
相关推荐
玩转FusionCharts:Y轴数字形式(如去掉K,加前缀什么的。
FusionCharts flash报表工具
融合图用于FusionCharts JavaScript图表库的简单轻巧的VueJS组件。 Vue-FusionCharts包装器可让您轻松将FusionCharts包含在VueJS项目中。Github回购: : 文档: : 支持: : 融合图官方网站: : 官方NPM软件包: : ...
FusionCharts JavaScript图表库的一个简单而轻巧的官方Angular组件。 angular-fusioncharts使您可以轻松地在Angular应用程序中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
flash xml fusioncharts网页波动折线图走势 flash xml fusioncharts网页波动折线图走势 flash xml fusioncharts网页波动折线图走势
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识,你只需要...
FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , JSP...
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识,你只需要...
非常绚的flash图表,支持java,.net,php等
苗条融合图用于FusionCharts JavaScript图表库的简单轻巧的官方Svelte组件。 svelte-fusioncharts使您可以轻松地在Svelte应用程序或项目中添加JavaScript图表。Github回购: : 支持: : 融合图官方网站: : 官方NPM...
Fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,...提供交互式和强大的动态图标,fusioncharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表。
免费漂亮的Flash图形报表-FusionCharts Free V2.1
该项目不再被积极维护FusionCharts React Native: 一个React Native组件,为FusionCharts JavaScript图表库提供绑定。 它可以轻松地将丰富的交互式图表添加到任何React Native项目中。Github回购: : 文档: : 支持...
angularjs-fusioncharts 一个用于FusionCharts JavaScript图表库的简单轻巧的官方AngularJS组件。 angularjs-fusioncharts使您可以轻松地在AngularJS应用程序中添加JavaScript图表。Github回购: : 文档: : 支持: ...
FusionCharts Free(图表flash控件)很好用,有教程和dll.
轻量级的EmberJS组件,可为FusionCharts JavaScript图表库提供绑定。 它可以轻松地将丰富的交互式图表添加到任何雄心勃勃的Ember应用程序中。 Github回购: : 文档: : 支持: : 融合图 官方网站: : 官方NPM...
FusionCharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图表,fusioncharts...提供交互式和强大的动态图标,fusioncharts充分利用流体美的Flash为模版,使用XML作为数据接口,产生和用户互动的动态图表。
FusionCharts参数及功能特性详解实例
FusionCharts是一个闪光的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , ...
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识,你只需要知道...