FusionCharts的导出图片功能

之前公司用了一个图标控件FusionCharts来制作各类报表图片。它的确很炫并且有3D效果，比Echar等等好看多了。但是由于是买的第三方控件，所以还是有不足的地方。用过的人都知道FusionCharts生成的图片非常漂亮，那么怎么导出来呢？

大家肯定第一反应是想到了一个属性：exportaction。不过，这个属性提供了服务器端下载以及客户端下载，但是经过我多次试验后发现一个BUG：exportaction,/如果是SAVE则没反应 图片也没有下载到服务器上,但是能回调函数；download可以下载图片 但是没有回调函数。

那么怎么解决这个BUG呢？我改动了它生成图片的方法，具体代码到：http://download.csdn.net/detail/lijingrong_ljr/9302899 （点击打开链接 ）处下载。

然后更改引用的fusioncharts.js：

页面头增加3个公共属性

/* ljr 2015-11-26
 参数说明：
    BaseExportLocation  端口号地址【本机调适可以用localhost，但是部署到服务器上，必须使用服务器地址如：http://127.0.0.1】
    SYSDExportLocation  在服务器端生成图片的请求页
    SYSDExportCheckLocation 下载图片的时候，验证图片是否已经生成的请求页
*/
var BaseExportLocation = "http://localhost:8022";
var SYSDExportLocation = BaseExportLocation + "/FCExporterServerDown.aspx";
var SYSDExportCheckLocation = BaseExportLocation + "/CheckImgFinished.ashx";

然后在此页面请求服务器生成图片的方法里替换掉之前的页面，如下图：

这里原来是根据exportaction属性来判断是服务器下载还是客户端，因为它有BUG所以我直接不看它的逻辑，全部改成服务端下载。它在服务器生成了图片之后，我在获取然后在下载到我的EXCEL等其他文件中。

至于需要传一些什么参数给它呢？如下所示：

 var fileName=newGuid();//图片的名称，因为下面我们下载的时候还会用到，所以就告诉服务器生成图片就是这个名称。

designChart=chartObj[i]; //FusionCharts生成的chartObj对象，里面已经包含了数据等一些基础属性。
designChart.setChartAttribute("exportEnabled","1"); //是否导出图片 加上可以导出图片
designChart.setChartAttribute("exportFormats","JPG");//生成图片的类型，我发现这个好像也没太大作用，它都是生成的fusioncharts.js里面默认的那个类型，默认好像PNG，我也把它改成JPG。
designChart.setChartAttribute("exportShowMenuItem","0");//是否显示可下载那个图标
designChart.setChartAttribute("exportTargetWindow","_self");//下载方式，这个随意，因为反正是服务器端了
designChart.setChartAttribute("exportFileName",fileName);//图片名称
designChart.setChartAttribute("exportaction","download");
designChart.exportChart();   //这个就是告诉服务器我们要下载图片的方法了        
setTimeout("checkExportImgFinished('"+fileName+"','"+title+"')",2000);//判断图片是否已经生成成功

大家看到了，因为fusioncharts没有图片生成的回调函数，所以我们加了一个setTimeout方法，隔一段时间去请求看看图片是否已经生成成功。如下是考虑的多图片的时候，所以图片名称等需要累加。但是上面的方法需要一个一个的执行。

//ljr 判断是否已经生成图片
    var NowCheckCount=0,AllCheckCount=0,fileNameAll="",imgTitleAll="";
    function checkExportImgFinished(fname,title){ 
        $.ajax({
            type: 'Get',           
            async: false,
            url: SYSDExportCheckLocation+"?fileName="+fname,//这里就是我们之前fusioncharts.js里增加那3个公共属性
            success: function(data) {
                if(data=="true")
                {
                    checkCheckFinished(fname,title);//有图片则把路径累加
                }
                else noImg(fname,title);
            },
            error:function(a,b,c){
                noImg(fname,title);//无图片继续执行检测图片
            }
        });
    }
    //检查图片如果存在 则执行导出操作 2015-8-13
    function checkCheckFinished(fname,title){
        NowCheckCount++;
        if(fname!=null)
            fileNameAll+=BaseExportLocation+"/Exported_Images/"+fname+".JPG,";
        if(title!=null)
            imgTitleAll+=title+",";
        if(NowCheckCount>=AllCheckCount)//入托检测次数大于等于图片的个数 则不需要检测 直接执行下载方法
        {
            fileNameAll=fileNameAll.substr(0,fileNameAll.length-1);imgTitleAll=imgTitleAll.substr(0,imgTitleAll.length-1);
            chartCallBack(gpl1, reportName1, abandonColName1,useRender1,fileNameAll,imgTitleAll);
        }
    }
    //ljr 检测图片不存在的时候 在去进行检查 2015-8-12
    function noImg(fName,title){
         NowCheckCount++;
        if(NowCheckCount>10){  
            checkCheckFinished(null,null);
        }else{
            setTimeout("checkExportImgFinished('"+fName+"','"+title+"')",1500);    
        }
    }
    //ljr 2015-8-10 图片下载成功后的回调函数
    function chartCallBack(gpl, reportName, abandonColName,useRender,fileName,titleAll)
    {
        Ext.net.Mask.hide();
        这里就执行你自己的操作了，比如下载到EXCEL或者下载到WORD等等。
    }

基本就OK了，大家可以试试。