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

借助 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 中的 README 文档。

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

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

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

Query 组件将始终从第一个按时间顺序添加到关联信息中心的图块加载可视化图表，无论该图块显示在信息中心布局的什么位置。因此，最好仅使用单功能块信息中心作为查询引用。

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

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

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

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

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

现在，您可以将信息中心 ID 传递到 Query 组件的 dashboard 属性中，从而将查询嵌入到 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 应用中所做的更改。

后续步骤