Looker 可视化组件是一组基于 React 的组件，可在开源 @looker/visualizations 软件包中找到。
可视化组件接受 Query.client_id 值或 Looker 探索中的查询 ID，或 Looker 信息中心中的信息中心 ID，并在不使用 iframe 的情况下呈现客户端可视化图表。
这些组件可以开箱即用、进行自定义，也可以被视为纯数据格式设置器，以便从 Looker Explore 传递经过清理的数据，从而帮助您构建自己的自定义可视化图表。
Looker 可视化组件专为在使用 TypeScript/JavaScript SDK 通过 Looker 的 API 进行身份验证的 React 环境中使用而设计。如果您使用 Looker 扩展框架进行构建，系统会自动处理该步骤。
使用 Looker 可视化组件创建可视化图表
Looker 的可视化组件套件提供了两个高级组件来处理数据：
Query- 处理数据提取，并将响应加载到 React 上下文中Visualization- 接受Query返回的数据，并使用配置适配器在页面上呈现适当的自定义图表
目前，数据可以呈现为以下图表类型：
- 折线图
- 区
- 散点图
- 迷你图
- 单个值
- 条形图
- 列
- 表
- 饼图
我们正在开发更多图表类型。
如需查看每种图表类型的属性表，请访问可视化和查询属性表文档页面。
如需查看每种图表类型的可用配置选项，请查看可视化 Playground。
为什么要使用可视化组件？
可视化组件可以改进和简化在应用中渲染 Looker 可视化的过程，从而为开发者节省时间，并为开发者提供更多自定义和扩展 Looker 可视化的选项。
- 改进的嵌入 - 借助可视化组件，开发者可以在不使用 iframe 的情况下将 Looker 可视化嵌入到应用中。这有助于提升性能、监控功能和自定义功能。
- 集成简单 - 然后，可将可视化组件与
@looker/components中的其他组件结合使用，以创建全新的组合和前端体验。 - 自定义 - 与使用 iframe 相比，使用可视化组件更容易自定义嵌入式可视化图表。此外，借助可视化组件，开发者无需从头开始创建可视化层，即可更快地创建高度自定义的应用。
- 简化 - 可视化组件可提高 Looker 可视化内容的可移植性，并简化与 Looker API 的互动。
安装可视化组件
首先，添加 Looker 可视化组件 NPM 软件包：
- NPM：
npm install @looker/visualizations - 纱线：
yarn add @looker/visualizations
您还需要满足一些同级依赖项 - Looker/components、React 和 Styled Components：
- NPM：
npm install @looker/components react react-dom styled-components - 纱线：
yarn add @looker/components react react-dom styled-components
如需了解如何安装和使用可视化组件软件包，请参阅 GitHub 和 NPM 中的自述文件。