圖表匯出API

1.1 版本

1.2 應用場景

當圖表勾選了「圖表特效>交互屬性>工具欄」中的匯出圖片時，在圖表的右上角會出現「匯出」圖示，點選即可匯出為圖片。如下圖所示：

但有時為了圖表更美觀，不想要開啟工具欄，又希望匯出圖表，應該怎麼做呢？預期效果如下圖所示：

1.3 實現思路

可以透過元件新增點選事件，先獲取圖表物件，再使用API chart.saveAsImage() 匯出為圖片。

注：該API只能匯出為圖片，且圖片名稱固定為 export.png 。

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 節應用場景中的預期效果圖所示。

注：不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\圖表匯出為圖片API範例.cpt

點選下載範本：圖表匯出為圖片API範例.cpt