使用圖表元件算繪自訂圖表

這個範例會轉譯開發中應用程式本機的自訂轉視圖，而不是可從 Looker Marketplace 取得的自訂轉視圖。

Looker 可視化元件具有轉接器系統，可讓開發人員覆寫現有的圖表類型，或新增全新的圖表類型選項。

在下列情況下，這個選項會非常實用：

  • 您已建立要與 Looker 元件搭配使用的自訂 React 圖表。
  • 您想將現有的 Looker 預設圖表，替換為以其他程式庫建構的圖表。

如果您要建構的應用程式可讓使用者在工作階段中變更圖表視覺化類型，則覆寫或新增圖表的功能就特別實用。

背景

在 Looker 的 Explore 介面中算繪查詢，並將其 Query.client_id 傳遞至 Looker 的視覺化元件後，您可以更新 config 屬性的 type 屬性，藉此修改圖表類型。

type 屬性接受的每個值都會對應至特定的 React 元件。因此，當 type 設為 line 時，系統會算繪 Line 元件；當 type 設為 area 時，系統會算繪 Area 元件，以此類推。

Visualization 元件的 chartTypeMap 屬性可讓您在類型/元件對應表中新增項目，或取代現有項目，該對應表會將每個 type 值與特定元件建立關聯。

需求條件

您必須先匯入 DataProvider 元件，並提供已驗證的 SDK 例項。以下範例是在 Looker 的擴充功能架構中建構，SDK 則來自 ExtensionContext。

在 DataProvider 中，您可以轉譯 Query 和 Visualization 元件，從 Looker SDK 要求資料，並在應用程式中轉譯預期的圖表。

設定方式如下 (在 query 屬性中，將值替換為查詢中的 Query.client_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'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

新增圖表類型

您可以將設定值覆寫值傳遞至 Query 元件，藉此修改算繪的圖表類型。

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

在本例中，type 已設為 pie：Looker 元件預設提供的圖表。不過，如果您想使用預設未提供的圖表，該怎麼辦？在這種情況下，您可以使用 Visualization 的 chartTypeMap 屬性，在轉接程式系統中的類型/元件對應中新增或取代圖表元件。

舉例來說，如果您想在類型/元件對應圖中新增新的雷達圖表，請將其新增至 chartTypeMap，如下所示：

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

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

這段程式碼會執行以下作業：

  • 匯入 MyCustomRadar React 元件
  • 將 radar 鍵指派給 config.type 屬性
  • 更新 chartTypeMap 屬性，讓類型對應系統知道要針對 radar 的 type 轉譯什麼

以下是 Looker 圖表模擬區中的顯示方式：

視覺化實驗室會顯示雷達圖。

同樣地，如果您想轉譯自己的版本，也可以取代現有的圖表。在以下範例中，預設 Looker 元件的折線圖會由自訂折線圖元件覆寫：

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

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

從現在開始，每當 Query 元件遇到圖表類型設為 line 的查詢時，就會以自訂實作取代 Looker 預設。

後續步驟