1. 概述
本文主要說明圖表塊組件樣式設計。
圖表塊組件樣式是指圖表塊的外部框架樣式，并非圖表内容樣式，圖表内容樣式設置可參考 圖表樣式 。
2. 添加圖表塊
在 FineReport 設計器中點擊「文件>新建決策報表」，在空白塊中選中「圖表塊」拖入到決策報表中。
在決策報表中拖入一個餅圖，如下圖所示：
3. 屬性
報表塊所包含的屬性如下圖所示：
3.1 組件名稱
圖表塊的名稱，默認爲 chart 加數字，支持修改，但不支持爲空或重複。
3.2 可見
圖表塊是否可見，默認勾選，勾選表示預覽報表時該圖表塊可見 。
圖表塊支持隐藏功能，當需要隐藏該圖表塊時，取消勾選「可見」按鈕即可。圖表塊隐藏效果等同於該組件在設計端被删除的效果。
界面設置隐藏圖表塊也可以通過 JS 實現，詳細點擊 JS 隐藏決策報表内報表塊/圖表塊
3.3 樣式
點擊「樣式」後面的 按鈕，彈出框架設置對話框，可對圖表塊「樣式」進行設置。如下圖所示：
各設置項介紹如下表所示：
| 分類 | 設置項 | 說明 |
|---|---|---|
| 框架 | 框架 | 可選擇「标準」和「自定義」。選擇「自定義」，下面出現「标題」内容 |
| 渲染風格 | 分爲「普通」和「陰影」，即邊框的渲染風格 | |
| 邊框粗細 | 用戶根據需要選擇 | |
| 邊框顔色 | 用戶可自定義設置 | |
| 圓角 | 用戶可設置報表塊的圓角 注：如果邊框爲無，圓角效果不生效 | |
| 主題背景 | 填充可設置「沒有背景」、「顔色」、「圖片」、「漸變色」 | |
| 不透明度 | 可調整主體背景的透明度 | |
| 标題 | 标題 | 報表塊的标題内容 注：如果想要在标題開頭輸入空格符，可以用公式輸入，如“ 标題” |
| 标題格式 | 标題的字号、字體等設置 | |
| 對齊方式 | 标題的對齊方式，可選擇靠左、居中、靠右 | |
| 标題背景 | 标題的背景 |
3.4 組件大小
組件大小即圖表塊的寬度和高度，如下圖所示：
圖表塊的寬高度可以在「組件大小」位置調整，也可以選中組件後，通過拖拉的方式調整。
3.5 組件位置
body 的布局方式爲「絕對布局」時，顯示組件位置，組件位置即圖表塊在body 中的橫縱坐标位置。如下圖所示：
注：body 的布局方式爲「自适應布局」時，圖表塊屬性處不顯示「組件位置」。
4. 移動端說明
4.1 内邊距導緻圖表大小不一緻
4.1.1 問題描述
body 「自适應布局」下，body 設置内邊距和不設置内邊距，在移動端預覽時，圖表塊預覽大小不一緻。
如下圖所示：圖表塊 1 與圖表塊 2 的大小設置是一緻的；
在 PC 端預覽時，圖表 1 與圖表 2 下的餅圖大小是一樣的，然而在移動端或 HTML5 下預覽時，兩張餅圖的大小是不一緻的，如下圖所示：
4.1.2 原因分析
原因在於模板内邊距的左内邊距，設計器的自适應會将左邊距計入相鄰的組件寬度。
4.1.3 解決方法
解決方法有三種：
1）取消設置模板内邊距的左邊距，并且調整 chart1 與 chart2 的尺寸寬高一緻；
2）由於 chart1、chart2 均爲餅圖，可以強制設定餅圖半徑爲相等的固定值；如下圖所示
3）通過調整控件大小實現,只要邊距加上相鄰組件的寬度跟期望等寬的控件寬度相等；
即左邊距加上 chart1 的寬度等於 chart2 的寬度。如下圖所示：
修改後，App 與 HTML5 預覽，餅圖大小是一緻的，如下圖所示：
4.1.4 模板下載
已完成模板可參考：%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\内邊距設置.frm
點擊下載模板：内邊距設置.frm
