C03-03 圖表組件重新整理

1. 當我們需要手動重新整理圖表、包括整個圖表組件時，我們可以新增元件以及元件點擊js事件，使用重新整理介面來進行圖表組件重新整理。

2. 普通圖表重新整理介面支援行動端，但不支援行動端決策報表報表塊內的圖表。

3. 擴展圖表重新整理介面不支援行動端。

1

資料準備。

1. 在本示例中，我們使用RAND函式來模擬圖表資料的變化，實際應用中不需要這一步。

2. 新增資料集ds1，具體可參考A03-01 內建資料集。

3. 輸入SQL：【SELECT * FROM Sales limit ${int (1+RAND()*4)}】。

2

插入圖表。

1. 可在儲存格中插入或以懸浮元素插入，參考A05-04插入圖表、A07-02插入圖表。

2. 以懸浮元素插入為例，點擊【插入】→【懸浮元素】→【插入圖表】→【柱形圖】。

3. 透過拉伸調整圖表顯示大小。

3

查看元素名稱。

1. 滑鼠右鍵點擊懸浮圖表，點擊【設置懸浮元素名稱】，即可查看元素的名稱。 

4

資料綁定。

1. 點擊【懸浮元素】→【資料】，進入資料綁定介面。

2. 設定【資料來源】為【資料集資料】，【資料集】選擇剛新建的【ds1】，【分類】選擇欄位【地區】，【系列名使用】選擇【使用欄位名】。

3. 新增兩個系列【銷售額】和【銷售成本】兩個欄位，【匯總方式】為【無】。

5

重新整理按鈕樣式設定。

1. 選中A1:H2儲存格，點擊【合併儲存格】。

2. 點擊【元件設置】，選擇【按鈕元件】，設定【按鈕型別】為【自訂】，【按鈕名稱】為【重新整理】。

3. 設定按鈕初始背景、滑鼠懸浮背景和滑鼠點擊背景。

4. 按鈕元件樣式設定，具體可參考A08-04 按鈕元件。

6

設定按鈕事件。

1. 點擊【事件】→【+】→【點擊】，新增一個按鈕點擊事件，即可在點擊按鈕後生效。

2. 選擇事件為【JavaScript腳本】，在下方腳本處輸入如下程式碼。

3. FR.Chart.WebUtils.getChart(" ")引號內需要填入圖表元素的名稱。

4. var chartWrapper1 = FR.Chart.WebUtils.getChart("Float7"); chartWrapper1.dataRefresh();

7

點擊填報或資料分析預覽，在瀏覽器中查看效果。

1

插入圖表。

1. 可在儲存格中插入或以懸浮元素插入，參考A05-04插入圖表、A07-02插入圖表。

2. 以懸浮元素插入為例，點擊【插入】→【懸浮元素】→【插入圖表】→【擴展圖表-柱形圖類】。

3. 通過拉伸調整圖表顯示大小。

2

查看元素名稱。

1. 滑鼠右鍵點擊懸浮圖表，點擊【設置懸浮元素名稱】，即可查看元素的名稱。

3

資料綁定。

1. 點擊【懸浮元素】→【資料】，進入資料綁定介面。

2. 設定【資料來源】為【資料集資料】，【資料集】選擇剛新建的【ds1】。

3. 【分類】選擇欄位【地區】，【值】選擇欄位【銷售額】，【匯總方式】為【無】。

4

設定按鈕事件。

1. 選中按鈕，點擊【事件】→【】，修改按鈕JS事件的程式碼。

2. 擴展圖表不支援dataRefresh()，但可以用dealReloadChartAjax()實現單個組件重新整理，完整的程式碼如下。

3. var chartWrapper1 = FR.Chart.WebUtils.getChart("Float10"); chartWrapper1.dealReloadChartAjax();

5

點擊【填報】或【資料分析預覽】，在瀏覽器中查看效果。