框架圖

1.1 版本

1.2 應用場景

框架圖體現了各個節點之間的上下級關係，用來表示組織層級關係，同時還能展示每個節點的的值。

1.3 圖表特點

優點：簡單直覺，很容易判斷上下級之間的關係。

缺點：不適合較大數據集的展現。

2.1 類型

以儲存格元素或懸浮元素插入框架圖後，可在右邊屬性面板的類型設定項下，自由選擇3種子類型，如下圖所示：

2.1.1 縱向框架圖

自上向下逐級展示資料，節點資料直覺可見。

2.1.2 橫向框架圖

自左向右逐級展示資料，資料直覺可見。

2.1.3 發散框架圖

動態展示資料，由一箇中心點向四週展示資料，效果比較酷炫。

2.2 資料

框架圖資料綁定的詳細介紹可以參見文檔：圖表資料。

框架圖資料中，需要包含父節點ID、節點ID、節點名稱、值。

• 父節點ID和節點ID不支援正文資料，會無法判斷層級

• 資料中只能有一個最父節點

具體格式如下圖所示：

2.3 樣式

框架圖樣式設計的詳細介紹可以參見文檔：圖表樣式。

框架圖的樣式>系列部分設定項跟基礎樣式有所不同，單獨介紹：

• 配色方案：系統自帶從預設到新特性一共12種選擇，還可以進行自訂配色。

• 遠端：包括顏色、寬度、不透明度均可以自行選擇設計。

• 節點：包括節點半徑、邊框寬度、邊框顏色、不透明度、圖片填充。

2.4 特效

框架圖特效設定的詳細介紹可以參見文檔：圖表特效。

3.1 報表設計

3.1.1 資料準備

點選設計器左上角「檔案>建立普通報表」，建立內建資料集 File1，記錄各部門層級關係和年假天數，如下圖所示：

3.1.2 插入圖表

合併一片儲存格區域，被選儲存格後點選上方工具欄插入圖表按鈕，插入一個縱向框架圖，如下圖所示：

3.1.3 資料綁定

選擇「資料」，綁定圖表資料如下圖所示：

3.2 框架圖設計

選中圖表，點選右側屬性面板「儲存格元素」，可設定圖表的各個屬性：類型、資料、樣式、特效。

3.2.1 設定樣式

儲存格元素修改標題正文，標籤勾選使用標籤>勾選節點名稱，其餘設定成預設即可，也可以根據實際業務需求進行設定，如下圖所示：

3.3 效果預覽

3.3.1 PC 端

儲存報表，點選「分頁預覽」，效果如下圖所示：

3.3.2 行動端

App 和 HTML5 端均支援，效果如下圖所示：

點選下載範本：縱向框架圖.cpt