反饋已提交
網絡繁忙
在一些商業報表中，往往由於要展示的產品分類較多，資料都顯示一張圖表中表顯得很擁擠，既不美觀，也不利於比較資料，往往會產生一些需求：
X 軸太密集時，可以設定捲軸，可以左右滑動顯示。
有的圖表效果需要拖拉放大才可以正常展示，希望圖表可以縮放。
圖表分類太多，可以左右滑動顯示。
柱子特別多，顯示效果不好，需要柱子間隔一致，生成橫向捲軸捲動展示
那麼可設定圖表縮放就必不可少了。接下來本文將詳細介紹圖表縮放的設定方式與效果。
在圖表「特效>互動屬性」中，可設定「圖表縮放」。未勾選「開啟縮放元件」時為手勢縮放，勾選後為元件縮放，元件縮放可選擇元件類型為「縮放軸」或「捲動軸」。
如下圖所示：
注1：若開啟坐標軸翻轉，則不支援勾選「開啟縮放元件」。
注2：不勾選「開啟縮放元件」時為手勢縮放，勾選後為元件縮放，兩者不能同時支援。
注3：使用 FVS 視覺化看板在行動端預覽時，直接使用圖表組件，圖表縮放不生效；可在表格組件中插入圖表使用。
點選圖表屬性面板「特效> 互動屬性 >圖表縮放」，預設未勾選「開啟縮放元件」，此時圖表縮放方式為「手勢縮放」。
可設定縮放方向為：X軸、Y軸、XY軸、無。預設為 XY軸。
注：詞雲圖、框架圖、力學氣泡圖只能設定縮放方向為 XY軸。
X軸：若縮放方向設定為 X軸 ，滑鼠選擇區域時，只能根據滑鼠軌跡選中「橫向區域」。
Y軸：選定區域只能縱向選擇。
XY軸：滑鼠選中區域可以是任意區域。根據x，y軸是分類軸，時間軸或者值軸執行x,y單向縮放時同樣的邏輯。建議多數情況下選擇XY軸。
無：不可縮放。
注：僅手勢縮放可設定縮放方向。
開啟內建範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\手勢縮放柱形圖.cpt 預覽效果。
放大：在圖表區用滑鼠選中區域即可放大該區域。放大後，選中的區域橫向擴展至整個繪圖區， Y軸 標籤根據當前範圍內的值重新計算。
縮減：從 X軸 某一邊框開始儘量另一邊框外拖，使其儘可能包含 X軸 的值，則原先頁面會縮減。
復原：點選預覽頁面右上角重新整理按鈕，可恢復原樣。
注：行動端預覽範本時，需要根據範本中圖表的類型，選擇合適的縮放方式：
行動端普通圖表、決策報表中的報表塊圖表、決策報表中的圖表塊-保留佈局：需要在繪圖區域長按後，方可拖曳矩形框，且僅支援放大。
行動端決策報表中的圖表塊-重佈局：雙指在繪圖區域進行縮放，同時支援放大和縮減
全螢幕顯示：點選可直接放大至全螢幕。
匯出：可直接生成png格式的圖片，未設定背景時，匯出的圖片背景為空白。
排序：可將資料大小從高到低或低到高進行排序，點選重新整理可復原。
當勾選「開啟縮放元件」後，即可設定縮放元件。元件縮放包含兩種元件類型：縮放軸和捲動軸。
注：決策報表行動端開啟重佈局時，圖表塊不支援元件縮放，可以放在報表塊中使用 。
元件類型為「縮放軸」時，可設定元件左右邊框是否可調整，以及初始展示時，左右邊框的值（邊框可以設定公式類型的縮放邊框）。
1）元件邊框：「可調整」時，可伸縮元件長短，可行動元件；「不可調整」時，則按設定的初始邊框為準，不可伸縮元件長短，但可以行動。
2）初始邊框：初始左右邊框可決定圖表初始展示的範圍。不設定時，圖表初始展示所有資料；設定後，只顯示邊框內的資料。
根據分類設定縮放邊框時，左右邊框的內容一定要跟「分類名」在資料集中的內容保持一致，否則不生效。詳情請查看第 4.1 節範例。
左右邊框可透過公式自訂，例如獲取資料集的前 50%。詳情請查看第 4.2 節範例。
對於多分類坐標軸圖表，軸類型以及初始邊框判斷是基於第一層 X軸 判斷的，左右邊框的寫法有所不同。詳情請查看第 4.3 節範例。
注1：當柱形圖分類為物件名稱時，左右邊框也可以填數字來限定元件初始大小。
注2：當分類圖表和多分類圖表的邊框寫法不同，本文的元件縮放範例和多分類圖儲存格件縮放範例將詳細介紹。
開啟內建範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\控制項縮放柱形圖.cpt 。
預覽效果如下圖所示，行動縮放軸選擇顯示的區域，拉伸縮放軸邊框放大縮減區域。
注：縮放軸中的趨勢線代表分類值的趨勢。
元件類型為「捲動軸」時，對於不同的圖表坐標軸類型，其設定不同。
當圖表的坐標軸為「分類坐標軸」時，可設定初始分類數，預設為 8 個分類。即圖表初始僅展示前 8 個分類的資料。
當圖表的坐標軸為「時間/數值坐標軸」時，可設定縮放比例，預設為 30% 。
對於多分類坐標軸圖表，軸類型以及初始邊框判斷基於第一層 X軸 判斷。
開啟內建範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\手勢縮放柱形圖.cpt 。
在圖表屬性面板選擇「特效>互動屬性>圖表縮放」，勾選「開啟縮放元件」，元件類型選擇「捲動軸」，初始分類數為 8 。
預覽效果如下圖所示，行動捲動軸選擇顯示的區域。
注：當設定縮放元件後，除了拖動縮放元件外，在繪圖區內拖動也將觸發縮放元件的滑動。繪圖區內拖動方向與元件相反，如向左滑動則元件則對應的圖表區域向右滑動。如下圖所示：
建立普通報表，合併一片區域儲存格，點選插入圖表快捷按鈕，插入柱形圖，如下圖所示：
建立資料集ds1,SQL語句為：SELECT * from S訂單 order by 訂購日期 limit 25。
選中柱形圖，綁定圖表資料，如下圖所示：
選中 A1 儲存格，右邊屬性面板選擇「儲存格元素>特效>互動屬性>圖表縮放」，取消勾選「開啟縮放元件」，縮放方向選擇「XY 軸」。
儲存報表，點選「分頁預覽」，效果如 2.3節縮放效果所示。
同時支援 App 端和 H5 端預覽，效果如下圖所示：
注：行動端預覽時，需長按螢幕後才能拖動區域。
開啟內建範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\手勢縮放柱形圖.cpt 。
在圖表屬性面板選擇「特效>互動屬性>圖表縮放」，勾選「開啟縮放元件」，元件類型選擇「縮放軸」，元件邊框選擇「可調整」。
設定初始左邊框為公式： ="2010-02-02 00:00:00"，初始右邊框為公式： ="2010-06-10 00:00:00" 。初始左右邊框對應資料集中的欄位，如下圖所示：
注：這個例子是個單分類柱形圖，所以寫法是用公式，所以會有個等於號。多分類圖表範例請參見下方範例三注：左右邊框的內容一定要跟「分類名」在資料集中的字串內容的寫法保持一致，否則不生效。
1）PC 端
儲存報表，點選「分頁預覽」，效果如 2.2.1 節縮放效果所示。
2）行動端
初始左邊框不設定，初始右邊框設定為公式 =ds1.value(round(count(ds1.select("訂購日期"))/2,0),4) ，即展示前 50% 的資料。
儲存報表，點選「分頁預覽」，效果如下圖所示：
同時支援 App 端和 HTML5 端。
圖表有多個分類時，設定元件縮放的左右邊框寫法跟單分類是不同的，下面介紹下如何設定多分類圖表的元件縮放。
開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\多分類坐標軸柱形圖.cpt，該範本有 3 個分類，如下圖所示：
選中圖表，屬性面板選擇「特效>互動屬性>圖表縮放」，勾選「開啟縮放元件」，元件類型選擇「縮放軸」，元件邊框選擇「可調整」，設定初始左邊框為 ["華東","孫陽","點心"]，不設定初始右邊框。如下圖所示：
注1：此處跟單分類圖表寫法不一樣，不用公式，直接在編輯框中輸入，或者在公式定義中輸入後刪除最前面的 = 。
注2：多分類邊框值設定規則：["父分類","子分類"]，且邊框值根據分類值進行填寫。例如該範本分類有三層：地區-姓名-產品，所以按順序填寫：["華東","孫陽","點心"]。
多分類圖表的效果如下圖所示，可以看到預覽時，圖表最左邊是從華東-孫陽-點心開始的。
1）手勢縮放
已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Advanced\Chart\ColumnChart\手勢縮放柱形圖.cpt
點選下載範本：手勢縮放柱形圖.cpt
2）縮放軸縮放
點選下載範本：元件縮放柱形圖.cpt
3）捲動軸縮放
點選下載範本：捲動軸縮放柱形圖.cpt
4）多分類圖表縮放
點選下載範本：多分類坐標軸柱形圖.cpt
滑鼠選中內容，快速回饋問題
滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙