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

使用 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 软件包。如需了解如何安装和使用可视化组件包，请参阅自述文档（可在 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>
  )
}

下图展示了扩展程序或 React 应用中的可视化效果：

第 3 步：根据需要修改可视化图表

现在，任何拥有信息中心编辑权限的 Looker 用户都可以更改信息中心中嵌入的可视化内容，并且这些更改将显示在您的 React 应用中，无需对代码进行任何更改。

对于修改权限，用户必须对信息中心所在的文件夹拥有管理访问权限、修改访问权限级别、对查询所基于的模型拥有模型访问权限，以及修改信息中心的相应 Looker 权限。

您可以通过以下两种方式修改嵌入式可视化图表：

  • 修改信息中心内的查询图块，或
  • 向信息中心添加新的查询图块，然后删除原有图块。

要修改查询图块，请按照修改用户定义的信息中心文档页面上的修改图块中的说明操作，并在信息中心保存您的更改以退出修改模式。

如需添加新图块并删除原有图块，请按照添加查询图块的相关说明添加新的图块。然后按照删除图块的说明操作，删除不需要的可视化图表。若要应用您所做的更改，请确保您的信息中心只有一个图块，然后将您的更改保存到信息中心以退出修改模式。

您修改并保存信息中心后，可视化图表更改将在您的扩展程序或 React 应用中显示，而无需您对代码进行任何更改。

后续步骤