amChart覆盖Div层

最新推荐文章于 2017-09-13 14:29:23 发布

原创最新推荐文章于 2017-09-13 14:29:23 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在页面中简单地添加amchart的特性，包括引入必要的JS文件、使用SWFObject对象来配置和定制amchart的行为，特别强调了在IE浏览器中实现透明flash覆盖div层的方法。

在页面中添加amstock的特性很简单，加入下面的代码：

很容易发现SWFObject对象上有一个addParam方法：实现向flash的parameters里加入<param name="wmode" value="transparent">：

addParam:function(_11,_12){

    this.params[_11]=_12;   
},

在JavaScript中添加：（我只在IE中测试通过，没有做FF的测试）

<script type="text/javascript">   
    // <![CDATA[        
    var so = new SWFObject("amstock/amstock.swf", "amstock", "800", "500", "8",   
            "#FFFFFF");   
    so.addVariable("path", "amstock/");   
    so.addVariable("settings_file", encodeURIComponent("amstock/amstock_settings.xml"));   
    so.addVariable("preloader_color", "#999999");   
    /*flash 覆盖div层解决  */  
    so.addParam("wmode","transparent");   
    so.write("flashcontent");   
    // ]]>   
</script>

体验了一把觉得问题的过程！

amchart.net 中,修改SWFObject.js

deconcept.SWFObject = function(_1, id, w, h, _5, c, _7, _8, _9, _a) {
...
//插入
    this.addParam("wmode", "transparent");
...
}

OK.

IE 、<param name="wmode" value="transparent">
 
FF 、<embed wmode="transparent">

Ext中使用amchart:

Ext.onReady(function(){

                    var panel = new Ext.Window({
                        title: 'My Panel',
                        applyTo: 'flashcontent',
                        width:520,
                        height:380,
                        html: ''
                    });
                    var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF");
                    so.addVariable("path", "amcolumn/");
                    so.addVariable("settings_file", encodeURIComponent("amcolumn_settings.xml"));
                    so.addVariable("data_file",  escape("data.aspx"));
                    so.addVariable("preloader_color", "#999999");
                    so.write("chart"); 
                    panel.show();
            });