使用可视化组件和信息中心属性呈现简单的可视化图表

使用 Query 可视化组件的 dashboard 属性，您可以呈现可嵌入的可视化，以响应 Looker 界面的变化。使用 dashboard 属性（而不是 query 属性）具有以下优势：

  • 任何具有信息中心修改权限的 Looker 用户都可以更新可视化内容。
  • 更新嵌入的可视化图表不需要对已部署的扩展程序或 React 应用进行任何更改。

如果您要创建无需响应 Looker 界面中更改的嵌入式可视化图表，请按照使用可视化组件和 query 属性呈现简单的可视化图表文档中的说明操作。

如需使用 Looker 可视化组件和数字信息中心 ID 呈现可嵌入的可视化图表，请确保您的设置符合相关要求，然后执行以下步骤：

  1. 构建查询并将其添加到信息中心。
  2. 使用信息中心 ID 将查询嵌入到 React 应用中。
  3. 根据需要修改可视化图表。

使用要求

开始前，您需要做好以下准备：

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

第 1 步：构建查询并将其添加到信息中心

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

使用此查询创建新信息中心。或者，您也可以将查询添加到空白的信息中心。

Query 组件会始终从第一个卡片（按时间顺序添加到关联的信息中心）加载可视化内容，而不考虑该卡片在信息中心布局中的显示位置。因此，最好仅使用单图块信息中心作为查询引用。

Query 组件将仅显示图块可视化图表。它不会显示卡片标题、信息中心标题或其他信息中心元素。应用于该卡片的任何信息中心过滤条件都不会影响嵌入式可视化图表。

创建信息中心后，请查看该信息中心。

数字面板 ID 会显示在信息中心网址中 dashboards/ 之后。请复制此 ID，以便在下一步中使用。

Query 组件的 dashboard 属性只接受数字 ID。它不接受 LookML 信息中心的字符串 ID。

第 2 步：使用信息中心 ID 将查询嵌入到 React 应用中

现在，您可以通过在 Query 组件的 dashboard 属性中传递信息中心 ID，将查询嵌入到 React 应用中：

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 应用中，而无需更改代码。

后续步骤