FusionCharts 導出圖片或PDF文件

前提:要具備三個文件:FusionCharts.js / FusionChartsExportComponent.js / FCExporter.swf

1.引用 js 文件

    <script src="../FusionCharts/FusionCharts.js" type="text/javascript"></script>

    <script src="../FusionCharts/FusionChartsExportComponent.js" type="text/javascript"></script>

2.生成圖表 與 導出時保存的按鈕

 <script type="text/javascript">
     $(function() {
　　　　　　　　var chart_service_chart = new FusionCharts("../FusionCharts/MSColumn3DLineDY.swf", "service_chart", "1024", "500", "0", "1");
            chart_service_chart.setDataXML(xmldata數據);
            chart_service_chart.render("map");
        });

//設置導出的保存按鈕　　　  
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../FusionCharts/FCExporter.swf");      
myExportComponent.componentAttributes.width = '1024';    
myExportComponent.componentAttributes.height = '60';    
//Background color    
myExportComponent.componentAttributes.bgColor = 'ffffdd';    
//Border properties    
myExportComponent.componentAttributes.borderThickness = '2';   
myExportComponent.componentAttributes.borderColor = '0372AB';    
//Font properties    
myExportComponent.componentAttributes.fontFace = 'Arial';    
myExportComponent.componentAttributes.fontColor = '0372AB';    
myExportComponent.componentAttributes.fontSize = '12';    
//Message - caption of export component    
myExportComponent.componentAttributes.showMessage = '1';    
myExportComponent.componentAttributes.message = '先右擊圖表導出,再點擊下邊按鈕進行保存.';    
//Button visual configuration    
myExportComponent.componentAttributes.btnWidth = '200';    
myExportComponent.componentAttributes.btnHeight= '25';    
myExportComponent.componentAttributes.btnColor = 'E1f5ff';    
myExportComponent.componentAttributes.btnBorderColor = '0372AB';    
//Button font properties    
myExportComponent.componentAttributes.btnFontFace = 'Verdana';    
myExportComponent.componentAttributes.btnFontColor = '0372AB';    
myExportComponent.componentAttributes.btnFontSize = '15';    
//Title of button    
myExportComponent.componentAttributes.btnsavetitle = '保存圖表'    
myExportComponent.componentAttributes.btndisabledtitle = '等待導出...';      
myExportComponent.Render("fcexpDiv");
 </script>

 

var chart_service_chart = new FusionCharts("../FusionCharts/MSColumn3DLineDY.swf", "service_chart", "1024", "500", "0", "1");

這句的最后一個參數要設置成 1 .

xmldata數據 源要設置參數

<chart  .....  exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' ... >

 

3. html代碼

 

<div style="text-align:center;padding-top:20px; padding-bottom:60px;" id="map"></div>
<div id="fcexpDiv" align="center" style="text-align:center; width:100%;">FusionCharts Export Handler Component</div>

 

附圖:

(1)右擊 點導出類型

(2)導出過程中

(3) 導出完成,保存變成可用狀態,點擊即可保存圖表.