反饋已提交

網絡繁忙

圖表縮放

1. 概述

1.1 版本

報表伺服器版本
功能變動
11.0-

1.2 應用場景

一些商業報表中,由於要展示的產品分類較多,資料都顯示一張圖表中,顯得很擁擠,既不美觀,也不利於比較資料。

希望可以透過手勢縮放圖表。如下圖所示:

15.gif

希望可以透過縮放軸位移查看或縮放圖表。如下圖所示:

16.gif

希望可以透過捲動軸捲動位移查看圖表。如下圖所示:

17.gif

1.3 功能入口

圖表的「特效>交互屬性」中,可設定圖表縮放。

注1:若開啟坐標軸翻轉,則不支援勾選「開啟縮放元件」。

注2:使用 FVS 視覺化看板在行動端預覽時,直接使用圖表組件,圖表縮放不生效;可在表格組件中插入圖表使用,此時圖表縮放生效。

1)未勾選「開啟縮放元件」時為手勢縮放,此時可設定縮放方向。如下圖所示:

2)勾選「開啟縮放元件」後為元件縮放,此時可選擇元件類型:

  • 縮放軸:選擇元件類型為縮放軸時,可設定元件邊框是否可調整及初始左右邊框。

  • 捲動軸:選擇元件類型為捲動軸時,可設定初始分類數(坐標軸為分類坐標軸)或縮放比例(坐標軸為時間/數值坐標軸)。

如下圖所示:

2. 手勢縮放

注:詞雲圖、框架圖、力學氣泡圖只能設定手勢縮放,且縮放方向只能設定為 XY軸 或無 。

1)預設未勾選「開啟縮放元件」,此時縮放方式為手勢縮放。

2)可設定縮放方向為:X軸、Y軸、XY軸、無:

  • X軸:滑鼠選擇區域時,只能根據滑鼠軌跡選中橫向區域。

  • Y軸:滑鼠選擇區域時,只能根據滑鼠軌跡選中縱向區域。

  • XY軸:縮放方向預設值。滑鼠選擇區域時,可根據滑鼠軌跡選擇任意區域。建議多數情況下設定縮放方向為 XY軸 。

  • 無:不可縮放。

3. 元件縮放

注:決策報表行動端開啟重佈局時,圖表不支援元件縮放,可以將圖表放在報表塊中使用,此時支援元件縮放。

1)勾選「開啟縮放元件」,此時縮放方式為元件縮放。

2)可設定元件類型:

  • 縮放軸:選擇元件類型為縮放軸時,可設定元件邊框是否可調整及初始左右邊框。

  • 捲動軸:選擇元件類型為捲動軸時,可設定初始分類數(坐標軸為分類坐標軸)或縮放比例(坐標軸為時間/數值坐標軸)。

3)當設定元件縮放後,除了拖動元件外,在繪圖區內拖動也將觸發元件的滑動。繪圖區內拖動反向與元件拖動方向相反,如在繪圖區內向左滑動對應元件向右滑動,圖表區域向右滑動。

拖動元件滑動如下圖所示:

13.gif

拖動繪圖區滑動如下圖所示:

14.gif


3.1 縮放軸

選擇元件類型為縮放軸時,可設定元件邊框是否可調整及初始左右邊框。

1)元件邊框:元件邊框決定元件是否可行動,是否可伸縮元件長短。

  • 設定為可調整時,可行動元件,可伸縮元件長短。

  • 設定為不可調整時,可行動元件,但不可伸縮元件長短,元件長短按設定的初始左右邊框為準。

2)初始左右邊框:初始左右邊框決定圖表初始展示的範圍。

  • 不設定初始左右邊框,則展示所有資料。

  • 設定初始左右邊框,則初始只顯示邊框內的資料。

3.2 捲動軸

選擇元件類型為捲動軸時,可設定初始分類數(坐標軸為分類坐標軸)或縮放比例(坐標軸為時間/數值坐標軸)。

  • 當圖表的坐標軸為分類坐標軸時,可設定初始分類數,預設為 8 ,即圖表初始僅展示前 8 個分類的資料。

  • 當圖表的坐標軸為時間/數值坐標軸時,可設定縮放比例,預設為 30% 。

4. 範例一:單分類柱形圖手勢縮放

4.1 建立範本

建立一個普通報表,如下圖所示:

4.2 準備資料

建立資料庫查詢 ds1。輸入 SQL 查詢語句:SELECT * from 銷量。如下圖所示:

4.3 插入圖表

合併一片儲存格區域,點選插入圖表快捷按鈕,插入柱形圖,如下圖所示:

4.4 綁定資料

選中柱形圖,綁定圖表資料,資料來源為「資料集資料」,資料集為「ds1」,分類為「銷售員」,系列名使用為「欄位名」,欄位名為「銷量」,系列名為「銷量」,匯總方式為「求和」,如下圖所示:

4.5 取消標題可見

選中柱形圖,點選右側的「儲存格元素>樣式>標題」,取消勾選「標題可見」,如下圖所示:

4.6 設定圖表縮放

選中柱形圖,設定圖表縮放,保持預設取消勾選「開啟縮放元件」,縮放方向保持預設「XY 軸」,如下圖所示:

4.7 效果預覽

1)PC 端

儲存報表,點選「分頁預覽」即可預覽範本,支援放大、縮減和復原,如下圖所示:

  • 放大:在圖表區用滑鼠選中區域即可放大該區域。放大後,選中的區域橫向擴展至整個繪圖區, Y軸 標籤根據當前範圍內的值重新計算。

  • 縮減:從 X軸 某一邊框開始向另一邊框外拖,使其儘可能包含 X軸 的值,則原先頁面會縮減。

  • 復原:點選重新整理按鈕即可復原。

11.gif

2)行動端

同時支援 App 端和 H5 端預覽,在繪圖區域長按後,可拖曳矩形框,僅支援放大和復原,效果如下圖所示:

注1:行動端預覽普通圖表、決策報表中的報表塊圖表、決策報表中的保留佈局圖表塊時,需要在繪圖區域長按後,方可拖曳矩形框,且僅支援放大和復原。

注2:行動端預覽決策報表中的重佈局圖表塊時,雙指在繪圖區域進行縮放,同時支援放大、縮減和復原。

12.gif


5. 範例二:單分類柱形圖元件縮放縮放軸可調整設定初始左右邊框為分類名

5.1 建立範本

同 4.1 節,此處不再贅述

5.2 準備資料

同 4.2 節,此處不再贅述

5.3 插入圖表

同 4.3 節,此處不再贅述

5.4 綁定資料

同 4.4 節,此處不再贅述。

5.5 取消標題可見

同 4.5 節,此處不再贅述。

5.6 設定圖表縮放

選中柱形圖,設定圖表縮放,勾選「開啟縮放元件」,元件類型選擇「縮放軸」,元件邊框選擇「可調整」,初始左邊框設定為公式:"孫林",初始右邊框設定為公式:"張穎",如下圖所示:

注1:此範例是單分類柱形圖,故寫法是公式,會有個等於號,多分類圖表範例詳情參見範例四。

注2:設定初始左右邊框為分類名時,左右邊框的內容一定要跟「分類名」在資料集中的字串內容的寫法保持一致,否則不生效。

5.7 效果預覽

1)PC 端

儲存報表,點選「分頁預覽」,初始展示時縮放軸長短為設定的初始左右邊框,可行動、伸縮縮放軸,效果如下圖所示:

  • 行動縮放軸:選中行動縮放軸,即可位移圖表。

  • 縮減縮放軸:選中縮減縮放軸,即可放大圖表。

  • 伸長縮放軸:選中伸長縮放軸,即可縮減圖表。

9.gif

2)行動端

同時支援 App 端和 H5 端預覽,初始展示時縮放軸長短為設定的初始左右邊框,可行動、伸縮縮放軸,效果如下圖所示:

  • 行動縮放軸:選中行動縮放軸,即可位移圖表。

  • 縮減縮放軸:選中縮減縮放軸,即可放大圖表。

  • 伸長縮放軸:選中伸長縮放軸,即可縮減圖表。

10.gif

6. 範例三:單分類柱形圖元件縮放縮放軸不可調整設定初始右邊框為公式

6.1 準備範本

同 4.1 節,此處不再贅述。

6.2 準備資料

同 4.2 節,此處不再贅述。

6.3 插入圖表

同 4.3 節,此處不再贅述。

6.4 綁定資料

同 4.4 節,此處不再贅述。

6.5 取消標題可見

同 4.5 節,此處不再贅述。

6.6 設定元件縮放

選中柱形圖,設定圖表縮放,勾選「開啟縮放元件」,元件類型選擇「縮放軸」,元件邊框選擇「不可調整」,初始右邊框設定為公式:ds1.value(round(count(ds1.select("銷售員"))/2,0),2),即展示前 50% 的資料,如下圖所示:

注:此範例是單分類柱形圖,故寫法是公式,會有個等於號,多分類圖表範例詳情參見範例四。

6.7 效果預覽

1)PC 端

儲存報表,點選「分頁預覽」,可行動縮放軸位移展示柱形圖,但不可伸縮縮放軸長短,縮放軸長短按設定的初始左右邊框為準,效果如下圖所示:

7.gif

2)行動端

同時支援 App 端和 HTML5 端,可行動縮放軸位移展示柱形圖,但不可伸縮縮放軸長短,縮放軸長短按設定的初始左右邊框為準,效果如下圖所示:

8.gif

7. 範例四:多分類柱形圖元件縮放縮放軸可調整設定初始左右邊框範例

7.1 建立範本

同 4.1 節,此處不再贅述。

7.2 準備資料

同 4.2 節,此處不再贅述。

7.3 插入圖表

同 4.3 節,此處不再贅述。

7.4 綁定資料

選中柱形圖,綁定圖表資料,資料來源為「資料集資料」,資料集為「ds1」,分類為「產品類型、銷售員、地區」,系列名使用為「欄位名」,欄位名為「銷量」,系列名為「銷量」,匯總方式為「求和」,如下圖所示:

7.5 取消標題可見

同 4.5 節,此處不再贅述。

7.6 設定圖表縮放

選中柱形圖,設定圖表縮放,勾選「開啟縮放元件」,元件類型選擇「縮放軸」,元件邊框選擇「可調整」,初始左邊框設定為:["華東","張珊","飲料"]初始右邊框設定為:["華北","韓文","點心"],如下圖所示:

注1:此範例為多分類圖表,與單分類圖表的初始左右邊框寫法不同,不用公式,直接在編輯框中輸入,或者在公式定義中輸入後刪除最前面的等於號 。

注2:多分類邊框值設定規則:["父分類","子分類"],且邊框值根據分類值進行填寫。例如該範本分類有三層:地區-銷售員-產品類型,所以按順序填寫:["華東","張珊","飲料"]。

7.3 效果預覽

1)PC 端

儲存報表,點選「分頁預覽」,初始展示時縮放軸長短為設定的初始左右邊框,可行動、伸縮縮放軸,效果如下圖所示:

  • 行動縮放軸:選中行動縮放軸,即可位移圖表。

  • 縮減縮放軸:選中縮減縮放軸,即可放大圖表。

  • 伸長縮放軸:選中伸長縮放軸,即可縮減圖表。

5.gif

2)行動端

同時支援 App 端和 H5 端預覽,初始展示時縮放軸長短為設定的初始左右邊框,可行動、伸縮縮放軸,效果如下圖所示:

  • 行動縮放軸:選中行動縮放軸,即可位移圖表。

  • 縮減縮放軸:選中縮減縮放軸,即可放大圖表。

  • 伸長縮放軸:選中伸長縮放軸,即可縮減圖表。

6.gif

8. 範例五:單分類柱形圖元件縮放捲動軸設定初始分類數範例

8.1 建立範本

同 4.1 節,此處不再贅述。

8.2 準備資料

建立資料庫查詢 ds1。輸入 SQL 查詢語句:SELECT * from 總公司月份。如下圖所示:

8.3 插入圖表

同 4.3 節,此處不再贅述。

8.4 綁定資料

選中柱形圖,綁定圖表資料,資料來源為「資料集資料」,資料集為「ds1」,分類為「月份」,系列名使用為「欄位名」,欄位名為「銷售額」,系列名為「銷售額」,匯總方式為「求和」,如下圖所示:

8.5 取消標題可見

同 4.5 節,此處不再贅述。

8.6 設定圖表縮放

選中柱形圖,設定圖表縮放,勾選「開啟縮放元件」,元件類型選擇「捲動軸」,初始分類數設定為「5」,如下圖所示:

8.7 效果預覽

1)PC 端

儲存報表,點選「分頁預覽」,初始只展示前 5 個分類,拖曳捲動軸可位移展示圖表,效果如下圖所示:

3.gif

2)行動端

同時支援 App 端和 H5 端預覽,初始只展示前 5 個分類,拖曳捲動軸可位移展示圖表,效果如下圖所示:

4.gif


9. 範例六:單分類柱形圖元件縮放捲動軸設定縮放比例

9.1 建立範本

同 4.1 節,此處不再贅述。

9.2 準備資料

同 8.2 節,此處不再贅述。

9.3 插入圖表

同 4.3 節,此處不再贅述。

9.4 綁定資料

同 8.4 節,此處不再贅述。

9.5 取消標題可見

同 4.5 節,此處不再贅述。

9.6 設定數值分類軸

選中柱形圖,點選右側的「儲存格元素>樣式>坐標軸 >X軸」,類型選擇「數值坐標軸」,如下圖所示:

9.7 設定圖表縮放

選中柱形圖,設定圖表縮放,勾選「開啟縮放元件」,元件類型選擇「捲動軸」,縮放比例設定為 60% ,如下圖所示:

9.8 效果預覽

1)PC端

儲存報表,點選「分頁預覽」,縮放比例為 60% ,拖曳捲動軸可位移展示圖表,效果如下圖所示:

1.gif

2)行動端

同時支援 App 端和 H5 端預覽,縮放比例為 60% ,拖曳捲動軸可位移展示圖表,效果如下圖所示:

2.gif


10. 範本下載

附件列表


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

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

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

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙