在之前的文章中,我说道:之所以没有选择Flex下的图形展现工具是因为在这个FusionCharts的组件中存在问题,设置图形的高度和宽度需要强制指定像素值。

而在今天,我成功的解决了这个问题,实际上,这个问题并非对方的缺陷,而是我自己没有下功夫去研究这个东西。

在FusionChats包中重要的JS文件为 FusionCharts.js文件,调用的函数为

infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang, detectFlashVersion, autoInstallRedirect){

这个函数的参数w和h就是设置高度和宽度,代码段如下

if(w) { this.setAttribute('width', w); }

if(h) { this.setAttribute('height', h); }

我们可以采用一个比较含蓄的做法来实现动态度的对象的高度和宽度然后设置这两个值。那就是使用clientHeight和clientWidth属性,我修改了测试下面 的Column2D.htm文件,修改如下

<div id="chartdiv" align="center" style="border:solid 1px menu;width:50%;height:400px"> FusionCharts. </div>

<script type="text/javascript" defer>
var x=    document.getElementById("chartdiv");
var chart = new FusionCharts("../Charts/Column2D.swf", "ChartId", x.clientWidth, x.clientHeight, "0", "0");
chart.setDataURL("Data/Column2D.xml");        
chart.render("chartdiv");
</script>

这样就实现了图形的浮动布局,呵呵,简单是不是?

在测试代码中,为什么他们的代码布局为这样的呢:

代码紧随Div之后,有JS开发经验的同志应该知道为什么,是为了防止对象找不到,保证用到的对象已经生成了DOM模型。

这样问题就出现了,刚才的解决方案中,如果函数实在页面未初始化完成的时候调用,那就出现取得的clientWidth和clientHeight都为0,这显然不对的,为了简单,我们使用了非常不可靠的defer,而真正安全的做法则是,在调用这个函数之前确保页面已经初始化完成,我使用的是setTimeout的方式实现,简单贴出思路,就不弄完全的解决方案了:

if(document.readyState!="complete")
        {
            var argu =$A(arguments);
            var fakeFunction=(function(){ function.apply(null, argu); });
            setTimeout(fakeFunction,10);
            return;
        }

上面的代码中使用了prototype.js的一个函数,不做说明咯,呵呵。

上面代码存在一个致命伤,不能返回函数的实际返回值,你知道不知道????

PS:被大头搞的神经兮兮的,测试在FF下和IE下通过,鼓掌!

BTW:你可以修改这个JS文件中的函数 render: function(elementId){ 将提示下载Flash播放器的内容修改成中文。