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

首发优快云 http://blog.youkuaiyun.com/basecn/archive/2011/06/09/6533168.aspx

作者：BaseCN            Email:basecn@163.com

 

---

1.  拉伸模式scaleMode

下面展示不同的scaleMode在IE和Firefox中的差别：

	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)的大小；要么FusionChart的scaleMode就应该为noScale。如果需要缩放，可以用Ext.get( elId ).remove()把原容器直接移除，再重创建新尺寸的FusionChart；

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

3.  Extjs面板切换

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

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

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

4.  设置数据

如果按demo的流程：

var myChart = new FusionCharts("MSColumn2D.swf", "FusionCharts_1", "450", "300", "0", "0"); myChart.setDataURL("Data.xml"); myChart.render("chartdiv"); 

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

察看FusionCharts.js源码：

setDataURL: function(strDataURL){ //This method sets the data URL for the chart. //If being set initially if (this.initialDataSet==false){ this.addVariable('dataURL',strDataURL); //Update flag this.initialDataSet = true; }else{ //Else, we update the chart data using External Interface //Get reference to chart object var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id')); if (!chartObj.setDataURL) { __flash__addCallback(chartObj, "setDataURL"); } chartObj.setDataURL(strDataURL); } }, 

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

再看getSWFHTML方法：

getSWFHTML: function() { var swfNode = ""; if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" mce_src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" '; swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" '; var params = this.getParams(); for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; } var pairs = this.getVariablePairs().join("&"); if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; } swfNode += '/>'; } else { // PC IE swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">'; swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />'; var params = this.getParams(); for(var key in params) { swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />'; } var pairs = this.getVariablePairs().join("&"); if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';} swfNode += "</object>"; } return swfNode; }, 

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

那么，假设在demo的代码后紧跟setDataXXX设值（这个很有可能，先创建对象，然后使用对象），会怎么样？

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

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

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

function __flash__addCallback(instance, name) { instance[name] = function () { return eval(instance.CallFunction(""+__flash__argumentsToXML(arguments,0)+"")); }; }; 

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

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