Looker 可視化元件是一組以 React 為基礎的元件，可在開放原始碼 @looker/visualizations 套件中使用。
視覺化元件會接受 Query.client_id 值或 Looker Explore 的查詢 ID，或是 Looker 資訊主頁的資訊主頁 ID，並在不使用 iframe 的情況下，轉譯用戶端視覺化內容。
這些元件可立即使用、自訂，或視為純粹的資料格式化工具，以便從 Looker 探索傳遞經過清理的資料，方便您建立自訂的視覺化效果。
Looker 圖表元件專為在使用 TypeScript/JavaScript SDK 透過 Looker API 驗證的 React 環境中使用。使用 Looker 擴充架構建構時，系統會自動處理這個步驟。
使用 Looker 圖表元件建立圖表
Looker 的視覺化元件套件提供兩種高階元件，可用於處理資料：
Query：處理資料擷取作業，並將回應載入 React 情境Visualization：接受Query傳回的資料，並使用設定轉接器在頁面上顯示適當自訂的圖表
目前，資料可轉換為下列圖表類型：
- 折線圖
- 區
- 散布圖
- Sparkline
- 單一值
- 長條圖
- 欄
- 資料表
- 圓餅圖
我們正在開發更多圖表類型。
如要查看各個圖表類型的屬性表格，請參閱「可視化和查詢」屬性表格說明文件頁面。
如要查看各圖表類型的可用設定選項，請參閱可視化實驗室。
使用圖表元件的好處
視覺化元件可改善及簡化在應用程式中從 Looker 算繪視覺化內容的程序，讓開發人員有更多時間進行自訂和擴充 Looker 視覺化內容。
- 改善嵌入功能：透過可視化元件，開發人員可以在應用程式中嵌入 Looker 可視化資料，而不需要使用 iframe。這有助於提升效能、監控功能和自訂功能。
- 輕鬆整合：您可以將視覺化元件與
@looker/components中的其他元件結合，打造全新組合和前端體驗。 - 自訂：使用視覺化元件比使用 iframe 更容易自訂嵌入式視覺化資料。此外，透過可視化元件，開發人員不必從頭開始建立可視化層，就能更快速地建立高度客製化的應用程式。
- 簡化：圖表元件可提升 Looker 圖表的可攜性，並簡化與 Looker API 的互動。
安裝視覺化元件
如要開始使用，請新增 Looker 圖表元件 NPM 套件：
- NPM：
npm install @looker/visualizations - YARN：
yarn add @looker/visualizations
您也必須滿足幾個同級依附元件，包括 Looker/元件、React 和 Styled 元件：
- NPM：
npm install @looker/components react react-dom styled-components - YARN：
yarn add @looker/components react react-dom styled-components
如要瞭解如何安裝及使用圖像化元件套件，請參閱 GitHub 和 NPM 中的 README 文件。