使用圖表元件和資訊主頁屬性算繪簡單的圖表

使用 Query 圖像化元件的 dashboard 屬性，即可算繪可嵌入的圖像化資料，以便回應 Looker UI 的變更。使用 dashboard 屬性可享有下列優點：

  • 凡是具有資訊主頁編輯權限的 Looker 使用者，都可以更新這項視覺化資料。
  • 您不需要變更已部署的擴充功能或 React 應用程式，即可更新嵌入式視覺化資料。

如要使用 Looker 圖表元件和數字資訊主頁 ID 算繪可嵌入的圖表，請確認設定符合規定，然後執行下列步驟：

  1. 建立查詢並新增至資訊主頁。
  2. 使用資訊主頁 ID 將查詢嵌入 React 應用程式。
  3. 視需要修改視覺化資料。

需求條件

開始前，請先準備以下幾項元素：

  • 您必須具備 Looker 執行個體的存取權。
  • 無論您是使用擴充功能架構還是自有的獨立 React 應用程式，都必須透過 Looker API 進行驗證，並存取 Looker SDK 物件。詳情請參閱 Looker API 驗證或擴充功能架構。
  • 請確認您已安裝 Looker 圖表可視化元件 NPM 套件，以及 @looker/components-data NPM 套件。如要瞭解如何安裝及使用圖像化元件套件，請參閱 GitHub 和 NPM 中的 README 文件。

步驟 1：建立查詢並新增至資訊主頁

使用「探索」在 Looker UI 中建構查詢。將支援的顯示圖表新增至「探索」頁面，並視需要在顯示圖表的「設定」選單中設定相關設定。

使用這項查詢建立新資訊主頁。或者，您也可以將查詢新增至您已建立的空白資訊主頁。

Query 元件一律會從與相關資訊主頁按時間順序新增的第一個圖塊載入圖表，無論圖塊在資訊主頁版面配置中顯示的位置為何。因此，建議您只使用單一資訊方塊的資訊主頁做為查詢參照。

Query 元件只會顯示資訊方塊圖表。不會顯示資訊方塊標題、資訊主頁標題或其他資訊主頁元素。套用至資訊方塊的任何資訊主頁篩選器，都不會影響嵌入式顯示資料。

建立資訊主頁後，請查看資訊主頁。

在資訊主頁網址中，數字資訊主頁 ID 會出現在 dashboards/ 後方。複製這個 ID，以便在下一個步驟中使用。

Query 元件的 dashboard 屬性只接受數字 ID。但不接受 LookML 資訊主頁的字串 ID。

步驟 2：使用資訊主頁 ID 將查詢嵌入 React 應用程式

您現在可以透過 Query 元件的 dashboard 屬性，在 React 應用程式中嵌入資訊主頁 ID：

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

步驟 3：視需要修改視覺化呈現

從現在起，凡是擁有資訊主頁編輯權限的 Looker 使用者，都可以自由變更資訊主頁內嵌的視覺化資料，而且變更內容會顯示在 React 應用程式中，無須變更任何程式碼。

如要編輯資訊主頁，使用者必須具備資訊主頁所在資料夾的「管理存取權、編輯」存取層級、查詢所依據的模型存取權，以及編輯資訊主頁的適當Looker 權限。

修改嵌入式示意圖的方法有兩種：

  • 編輯資訊主頁上的查詢圖塊，或
  • 在資訊主頁中新增查詢資訊方塊，然後刪除原始資訊方塊。

如要編輯查詢圖塊，請按照「編輯使用者定義的資訊主頁」說明文件中的編輯圖塊操作說明進行，然後儲存變更內容，即可退出資訊主頁的編輯模式。

如要新增資訊方塊並刪除原有的資訊方塊，請按照新增查詢資訊方塊的操作說明新增資訊方塊。然後按照刪除圖塊的操作說明刪除不必要的顯示資訊。如要套用變更，請確認資訊主頁上只有一個資訊方塊，然後儲存變更並結束資訊主頁的編輯模式。

修改並儲存資訊主頁後，擴充功能或 React 應用程式就會顯示可視化變更，而您不必變更任何程式碼。

後續步驟