轉帖|使用教程|編輯:龔雪|2014-11-06 09:30:39.000|閱讀 563 次
概述:Fusioncharts教程之圖表組件如何導出圖片、PDF文件。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
【年終大促 巔峰盛慧】FusionCharts XT及FusionCharts XT套包<8折>優惠,最高直降2W!
關于Fusioncharts圖表組件導出圖片、PDF文件的詳細操作步驟如下,這里:
1、下載相關文件
要想導出圖片必須下載fusionCharts 3.1以上的破解版,除了自己需要的swf文件外(包括FCExporter.swf) 還要兩個js文件:
相信各位應該很清楚FCExporter.swf和這兩個js的用途,在這我就不做多解釋了!將兩個js導入jsp頁面:
2、生成報表
實現報表很簡單,只需要一下幾行代碼即可:
OK各位,當說到這里的時候,我要插入一點,fusionCharts加載數據有三種方式: Xml文件格式加載,Javascript的json格式加載,字符串拼湊加載。
最重要的是,在chart的屬性上要包括以下三個屬性:
3、右鍵導出
當你的界面能看到超炫的報表了,而且確保是fusionCharts 3.1以上的版本,此時您在報表上右鍵是絕對可以看到導出菜單的:
呵呵,到了這里,奉勸各位別高興太早!盡管你現在導出jpg、png、或pdf都沒用的,根本就沒導出。別急,我們回到最開始的數據源代碼,想要導出圖片必須加上以下參數:
到這里雖然你還無法導出圖片,當就快接近尾聲了,此時你可以看到的效果已經變成中文的了的。
4、前臺編寫導出腳本
還記得我么之前說的exportHandler='fcExporter1'嗎?屬性值是綁定前臺導出處理程序的標識。那現在我們就來寫這個處理程序。在你生成報表代碼的后面添加如下代碼:
以上都是導出按鈕的樣式設置 不做解釋
最關鍵的是以下這行代碼:參數exproterDiv表示導出按鈕將在哪個div里面顯示,即:我們必須在頁面加上一個div 且id=exproterDiv
當這一切都成功的設置后,您再嘗試右鍵生成jpg圖片之后,你可以在id為exproterDiv里面看到:
點擊’另存為’將彈出保存框:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網