转自于百度-http://hi.baidu.com/%EE%D1%D7%D300544/blog/item/b500962eb4a4df5d4ec2261f.html
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");就可以了
分享到:
相关推荐
免费漂亮的Flash图形报表-FusionCharts Free V2.1
react-fusioncharts使您可以轻松地在React应用程序或项目中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : 官方NPM软件包: : 问题: : 目录 入门 要求 在您的操作系统中...
angular-fusioncharts, 面向FusionCharts的Angular JS绑定 #AngularJS 图表插件简单有效的AngularJS图表插件。###Details 使用这个AngularJS图表插件,只使用一个指令向你的网络和移动应用程序添加交互式图表。 从...
angular-fusioncharts使您可以轻松地在Angular应用程序中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : 官方NPM软件包: : 问题: : 目录 入门 要求 在您的操作系统中全局...
Vue-FusionCharts包装器可让您轻松将FusionCharts包含在VueJS项目中。Github回购: : 文档: : 支持: : 融合图官方网站: : 官方NPM软件包: : 问题: : 目录入门要求在您的操作系统中全局安装了Node.js , NPM /...
js实现图表-FusionCharts 这里支持C#,vb.net,php,jsp等开发语言,做报表是不错的选择
基于WEB的Flash 统计图控件(Flex---FusionCharts_Evaluation v3)及其中文开发指南,华丽美观,简单易用。
svelte-fusioncharts使您可以轻松地在Svelte应用程序或项目中添加JavaScript图表。Github回购: : 支持: : 融合图官方网站: : 官方NPM软件包: : 问题: : 目录安装用法使用图表API 处理事件快速开始超越图表...
angularjs-fusioncharts使您可以轻松地在AngularJS应用程序中添加JavaScript图表。Github回购: : 文档: : 支持: : 融合图官方网站: : 官方NPM软件包: : 问题: : 目录入门要求安装使用图表API 处理事件快速...
这是一款Js生成柱状图,饼图,线图.........的插件
弃用免责声明: 这是React Native wrapper的最旧版本,发布于4.1.2之前。该项目不再被积极维护FusionCharts React Native: 一个React Native组件,为FusionCharts JavaScript图表库提供绑定。 它可以轻松地将丰富的...
jQuery的融合图表FusionCharts Suite XT jquery-fusioncharts允许您使用jQuery语法在所有浏览器和设备上无缝呈现和操纵图表。 它结合了FusionCharts Suite XT的愉悦性和全面性以及易于使用的jQuery语法,可帮助您向...
灰烬融合图 轻量级的EmberJS组件,可为FusionCharts ... 已在您的项目中安装FusionCharts和Ember ,详细说明 安装 直接下载所有二进制文件都位于我们的。 从NPM安装 要将ember-fusioncharts安装到任何现有的emb
JavaScript Charts for Web, Mobile & Apps - FusionCharts @version 3.4.1
支持x轴中文斜体的FusionCharts,有我自己写的小例子
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
FusionCharts
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
fusioncharts-suite-xt 3.6.0
[JavaScript版]fusioncharts-suite-xt-v3.9.0,支持各种浏览器(最低IE8)。无水印。完美。包含全量地图数据fusionmaps-xt-definition.zip。