反饋已提交

網絡繁忙

當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

C03-03 圖表組件重新整理

一、概述

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

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

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

二、屬性設定-普通圖表

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

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

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

1 (1).gif

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

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

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

2.gif

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

3.gif

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

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

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

4.gif

5
重新整理按鈕樣式設定。
  1. 選中A1:H2儲存格,點擊【合併儲存格】。

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

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

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

5.gif

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

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

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

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

6.gif

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

7.gif

三、屬性設定-擴展圖表

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

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

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

8.gif

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

9.gif

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

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

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

10.gif

4
設定按鈕事件。
  1. 選中按鈕,點擊【事件】→【image.png】,修改按鈕JS事件的程式碼。

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

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

11.gif

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

12.gif

附件列表


主題: 圖表應用
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉