FusionCharts Free版本支持动态宽度

2008-05-07 14:59:00 | , , ,

在之前的文章中,我说道:之所以没有选择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播放器的内容修改成中文。

Comments (6) -

沈胜衣 :

基本上很难,呵呵,这个转换的确不是那么简单到实现的,首先FusionChart的致命伤在于不同到图形有不同到Flash支持,这点在其他到图形控件中是不存在,实话说,不知道这些家伙是怎么想的,呵呵

非常抱歉,我不能解决您的问题,呵呵

楚轻侯 :

可以使用比较土的办法,直接使用脚本生成另外的一个FusionChart实例,然后重新Render,不过这样的确让人觉得很不爽

沈胜衣 :

小熊,我必须删除您的评论,主要是布局被破坏了,俺到CSS没写好,汗。

熊殿 :

呵呵 楼主删除吧 没事 目前看来只有按照原有方案解决这个问题了 也就是楚兄说的那样。这样的坏处是flash对象可能会重复生成,导致有点慢。我昨晚部署了一下,在本地机器上部署后浏览会比较慢,不过部署到服务器上之后速度还行。

FranceMarrakech ici :

Precise stimulating junctures you possess renowned , admire it for posting . “Success is a migration, hardly a aim. The doing is frequent further noteworthy than the consequence.” by Arthur Ashe.

Franceprix immobilier maroc 2011 :

I equal this website its a captain calm ! Cheerful I detected this on google. “Observe your enemies, for they primordial discovery absent your errors.” by Antisthenes.

Add comment




biuquote
  • Comment
  • Preview
Loading