Datagear 是一款功能強大的數據可視化與報表工具，在日常數據分析與展示過程中，能有效幫助用戶構建交互式報表與面板。本文結合實際使用場景，總結了在 Datagear 平臺上關于元數據整備、Board 面板設計、圖表嵌入等方面的使用經驗，供有類似需求的開發與數據分析人員參考。

?

---

元數據整備：從寬表到窄表的轉化實踐

在數據源設計階段，整潔的元數據結構是構建高效報表的前提。Datagear 需要讀取結構清晰的數據源，因此建議在接入數據前，對復雜結構的“寬表”進行清洗轉化為“窄表”。

示例說明

假設存在一個名為 Rate 的表格，其列名為 1W, 2W, 1M, 2M 等表示不同期限的利率字段，如下所示：

ID	Name	1W	2W	1M	2M
001	AAA	1.2	1.3	1.4	1.5

這類表格在數據結構上屬于典型的“寬表”，字段冗雜，不利于圖表組件進行泛化處理。優化建議是通過視圖（View）在數據庫層做一層加工，將其轉化為如下的“窄表”結構：

ID	Name	Tenor	Rate
001	AAA	1W	1.2
001	AAA	2W	1.3
001	AAA	1M	1.4
001	AAA	2M	1.5

此類結構在 Datagear 中的表格、圖表組件中更易于聚合、過濾與聯動，后續只需調用預處理好的視圖即可。

---

Board 面板的設計原則：實現真正的聯動查詢

Datagear 的 Board（面板）功能是用于構建多個圖表、表格和控件組成的交互式頁面。關鍵的一點是要實現“聯動查詢”，而不僅是多個組件的堆疊展示。

不聯動的誤區

如果只是將多個表格/圖表組件放在面板上，每個Chart組件依然是獨立的數據查詢，那么面板就失去了交互整合的意義。

聯動設計建議

• 使用統一的查詢參數（如 ID, Tenor, Date）綁定到多個Chart組件；

• 控件與圖表通過組件 ID 實現聯動，用戶選擇控件項后，所有相關組件同時刷新數據；

• 查詢效率可以通過參數緩存和懶加載機制進一步優化。

通過合理設計，可以讓面板真正成為一個數據分析“工作臺”，支持用戶在一個視圖中完成多維分析。

---

圖表組件引用方式說明

在實際構建 Datagear 的報表面板時，常常需要將多個圖表以 HTML 形式嵌入頁面。Datagear 提供了一種標準化的圖表引用方式，格式如下：

<div style="display:inline-block;width:45%;height:500px;" dg-chart-widget="ee39d93981957176a33e" id="chart0"><!--libor_fccy_table-->
</div>

參數說明

• dg-chart-widget: 圖表組件的系統唯一 ID，用于定位數據與圖表配置；

• id: HTML 元素 ID，用于聯動查詢時的標識引用；

• style: 控制該圖表容器的寬度與高度，通常為響應式布局提供支持；

• 注釋（可選）: 例如 <!--libor_fccy_table--> 用于記錄圖表的業務含義，便于維護。

通過這種方式，圖表可以靈活嵌入在任意 HTML 區域中，與其它 UI 元素協同呈現。

---

總結

在使用 Datagear 構建數據可視化平臺的過程中，我們總結出以下幾個關鍵經驗：

• 數據整備是基礎：寬表轉窄表可提高查詢效率和圖表通用性；

• 面板聯動是關鍵：不要讓面板淪為“展示墻”，要利用好控件與查詢參數的聯動機制；

• 圖表引用要標準化：統一使用 dg-chart-widget + id 的方式，提升開發效率與可維護性。

希望本文的總結能為正在部署或使用 Datagear 的開發者提供實用參考。