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

通过使用 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 组件将仅显示图块可视化。它不会显示功能块标题、信息中心标题或其他信息中心元素。应用于图块的任何信息中心过滤条件都不会影响嵌入的可视化图表。

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

信息中心网址中的 dashboards/ 后面会显示一个数字信息中心 ID。复制此 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 应用中更改可视化图表。

后续步骤