1. 概述
1.1 版本
| 報表伺服器版本 | 功能變動 |
|---|---|
| 11.0.2 | 新增：開放官方API chart.saveAsImage() |
1.2 應用場景
當圖表勾選了「圖表特效>交互屬性>工具欄」中的匯出圖片時，在圖表的右上角會出現「匯出」圖示，點選即可匯出為圖片。如下圖所示：
但有時為了圖表更美觀，不想要開啟工具欄，又希望匯出圖表，應該怎麼做呢？預期效果如下圖所示：
1.3 實現思路
可以透過元件新增點選事件，先獲取圖表物件，再使用API chart.saveAsImage() 匯出為圖片。
注：該API只能匯出為圖片，且圖片名稱固定為 export.png 。
2. 範例
2.1 開啟範本
本例直接在 圖表切換屬性 文檔中的範本上作修改，不講解圖表的製作，只示範圖表匯出API的使用。
直接開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\按鈕式圖表切換.cpt
或點選下載範本按钮式图表切换.cpt，點選設計器左上角「檔案>開啟」，開啟該範本。
2.2 設計參數面板
點選表格介面上方的編輯按鈕 進入參數面板，首先取消勾選「點選查詢前不顯示報表內容」，這樣預覽時才能直接看到圖表。
然後向參數面板拖入一個「下拉框元件」和一個「按鈕元件」。如下圖所示：
2.2.1 設定下拉框元件
因為 獲取圖表物件 的方法是 FR.Chart.WebUtils.getChart(chartID).getChartWithIndex(chartIndex)，其中 chartIndex 是從 0 開始的數字，表示一個圖表塊中的多個圖表物件。
所以我們將下拉框元件的元件名稱修改為 index ，資料字典設定為「自訂」，實際值是數字 0,1,2,3,4 ，顯示值則是對應的圖表型別。
具體步驟如下圖所示：
2.2.2 設定按鈕元件
選中按鈕元件，修改按鈕名稱為「匯出為圖片」，新增一個點選事件，輸入 JavaScript 代碼如下：
var i=_g().getParameterContainer().getWidgetByName("index").getValue(); //獲取下拉框元件值
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(i); //獲取圖表物件
chart.saveAsImage(); //匯出圖片
步驟如下圖所示：
2.3 效果預覽
儲存報表，點選「分頁預覽」，效果如 1.2 節應用場景中的預期效果圖所示。
注：不支援行動端。
3. 範本下載
已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\圖表匯出為圖片API範例.cpt
點選下載範本：圖表匯出為圖片API範例.cpt
