ExtJS与FusionChart - 在ExtJS框架中使用FusionChart的一点问题

首发CSDN http://blog.csdn.net/basecn/archive/2011/06/09/6533168.aspx

作者:BaseCN            Email:basecn@163.com

 


1.  拉伸模式scaleMode

下面展示不同的scaleModeIEFirefox中的差别:

 

IE

FF

exactFit

showAll

noScale

noBorder

可以看到FF中很好的表现出了不同拉伸模式的效果,而IE中则不明显。测试时的FusionChart尺寸用100%设置,DIV容器用100%设置。

为了保证在flash中设置的字体与实际相符,应该使用noScale。否则字体会在伸缩的同时被缩放。

2. 关于缩放

如果FusionChart用百分比设置尺寸,可以通过设置它的容器尺寸来改变大小。

下面是在noScale模式下的缩放截图:

IE

FF

Firefox中的表现很奇怪,FusionChart所在的DIV容器(图中蓝框)无法准确设置高度。在FF中观察节点的信息,高度参数正确却不能正常显示。

如果多次点击缩放,ExtJS就能正常的控制FusionChart 窗口的尺寸。scaleMode为其它值时,缩放Flash就不会被剪裁。

@这里要说两点:

1、使用FusionChart的应用,由于要显示出预设的字体大小,所以Flash就不应该支持拉伸。所以要么创建FusionChart后,不再改变窗口(DIV)的大小;要么FusionChartscaleMode就应该为noScale。如果需要缩放,可以用Ext.get( elId ).remove()把原容器直接移除,再重创建新尺寸的FusionChart

2、  FusionChart的尺寸尽量显式设置,不使用百分比。


3.  Extjs面板切换

ExtJS中使用TabPanel切换面板时,IEFF的表现是不同的。根据经验,这两种浏览器需要分别处理。

IE中的表现和预想一样,切换到其它面板再切回来,该显示什么就显示什么,也不会有闪烁问题。切换回来后只显示最后一次设置的setDataXXX值。

而在FF中,每次FusionChart被隐藏(或随着其它面板隐藏)后再显示时,Flash需要刷新。刷新会有一次闪烁,把画面恢复到第一次调用setDataXML, setDataJSONsetDataURL时所设置的参数(见下一节的源码分析)。所在在使用FF时,需要在切回时响应Panelactivate事件,调用setDataXXX方法给Flash设值(会有两次闪烁)


4.  设置数据

如果按demo的流程:

 

之后就不再用setDataXXX方法设置数据就没有问题,同时也不存在切换问题。如果希望动态刷新FusionChart数据,通过参数组成URL时问题就出来了。

察看FusionCharts.js源码:

 

上面是setDataURL的源码,setDataXMLsetDataJSON的结构与此相似。可以看到第一次设置数据时,参数是放到一个运行时参数表中。而后再设置时,会通过回调函数调用FusionChart.setDataXXX,同时传参进去。所以,如果在Render前两次调用setDataXXX方法,第二次调用就会报错。因为回调的对象(Flash)还没有画(创建)出来。

再看getSWFHTML方法:

 

上面第9,10行,第19,20行代码,把variable参数用”&”拼接后设置为flashflashvars参数。

那么,假设在demo的代码后紧跟setDataXXX设值(这个很有可能,先创建对象,然后使用对象),会怎么样?

答案是:会报与chartObj为空有关的错误

这是因为这个时候浏览器可能还没完成Flash的加载,第二次调用setDataXXX时,需要让Flash回调setData方法,而Flash对象不存在就会出错。

有时也会报__flash__addCallback相关的错误:

 

错误提示应该是没有__flash__addCallback方法。这个方法在Flash加载后会自动创建,没完成加载时没有这个方法。

设置数据的最后解决办法是在调用setDataXXX时,用Ext.util.TaskRunner延迟1秒执行,再没发现问题。不过不确定到应用环境后,会不会由于网络等原因再次出现。这个问题目前没找到太好的解决办法。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值