使用可视化组件和查询属性渲染简单的可视化图表

使用 Query 可视化组件的 query 属性是使用 Looker 可视化组件呈现可嵌入可视化的最简单方法。使用 query 属性（而不是 dashboard 属性）具有以下优势：

  • 您只需在 Looker 中构建查询，而无需创建信息中心。
  • query 接受的值（Query.client_id 或查询 ID）是不可变的；除非底层模型发生变化，否则对 Looker 实例所做的任何更改都不会影响嵌入式可视化。

如果您想创建可嵌入的可视化图表，以响应 Looker 界面中的更改，从而可供 Looker 用户（而非应用开发者）更新，请按照使用可视化图表组件和信息中心 ID 呈现简单的可视化图表文档页面上的说明操作。

如需使用 Looker 可视化组件和 query 属性呈现可嵌入的可视化图表，请确保您的设置符合要求，然后执行以下步骤：

  1. 在“探索”中构建查询并复制 Query.client_id 值。
  2. 将查询嵌入到 React 应用中。
  3. 添加 Visualization 组件。
  4. 使用 config 属性自定义设置。

使用要求

在开始之前，您需要准备以下几项元素：

  • 您必须有权访问 Looker 实例。
  • 无论您是在扩展程序框架中构建应用，还是在构建自己的独立 React 应用，都需要使用 Looker 的 API 进行身份验证，并有权访问 Looker SDK 对象。如需了解详情，请参阅 Looker API 身份验证或我们的扩展框架。
  • 确保您已安装 Looker 可视化组件 NPM 软件包和 @looker/components-data NPM 软件包。如需了解如何安装和使用可视化组件软件包，请参阅 GitHub 和 NPM 中的自述文件。

第 1 步：在“探索”中构建查询并复制 Query.client_id 值

使用探索在 Looker 界面中构建查询。向“探索”中添加支持的可视化图表，并且可以选择在该可视化图表的设置菜单中配置其设置。

在浏览器的地址栏中找到 qid 网址属性。分配给该属性的字母数字值为 Query.client_id。

例如，如果网址为 https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse，则 Query.client_id 为 evomfl66xHx1jZk2Hzvv1R。

Query.client_id 是一个唯一字符串，表示查询和可视化设置。如果您更改查询或设置中的任何内容，Query.client_id 也会随之更改。

复制该 Query.client_id 以在以下步骤中使用。

第 2 步：将查询嵌入到 React 应用中

现在，您可以获取 Query.client_id 并将其嵌入到 React 应用中。

以下代码适用于一个假设的 React 应用。此示例是在 Looker 扩展程序框架中构建的，并且 Looker SDK 对象已从扩展程序上下文提供程序中提取。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

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

  return null
}

首先，我们将使用 DataProvider 和 Query 组件。DataProvider 在上下文中存储 SDK 引用，Query 分派网络请求并设置响应呈现的格式。

此外，您还必须提供两项内容：

  • SDK 对象。SDK 对象是从扩展上下文中提取的。
  • Query.client_id。将 Query.client_id 分配给 query 属性。
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

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

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

第 3 步：添加 Visualization 组件

接下来，添加 Visualization 组件，该组件会解读 Query 返回的数据和配置设置，以呈现预期的图表。

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

此步骤会输出一个类似于以下示例的可视化结果：

折线图可视化。

第 4 步：使用 config 属性自定义设置

使用 Query 组件的 config 属性可替换从 SDK 返回的可视化设置。此属性可以改变任何受支持的特征，从可视化类型到每个数据系列如何呈现的详情等。

在下面的示例代码中，config 属性会将图表类型更改为 sparkline，并为数据系列分配一种新颜色。

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

上一步会呈现以下橙色条状图：

一个数据条可视化图表。

如需查看 config 属性中提供的子属性的完整列表，请参阅“可视化和查询”属性表参考文档。

后续步骤