Looker 可视化组件是一套基于 React 的组件,可通过开源 @looker/visualizations
软件包获取。
可视化图表组件接受 Looker 探索中的 Query.client_id
值或查询 ID 或 Looker 信息中心中的信息中心 ID,并在不使用 iframe 的情况下呈现客户端可视化图表。
这些组件可以开箱即用、可自定义,或者被视为纯数据格式设置工具,用于传递 Looker 探索中经过清理的数据,从而有助于您构建自己的自定义可视化图表。
Looker 可视化组件可在 React 环境中使用,而 React 环境已通过 TypeScript/JavaScript SDK 通过 Looker API 进行身份验证。使用 Looker 扩展框架进行构建时,系统会自动处理此步骤。
使用 Looker 可视化组件创建可视化图表
Looker 的可视化组件套件提供了两个用于处理数据的概要组件:
Query
- 处理数据提取,并将响应加载到 React 上下文Visualization
- 接受Query
返回的数据,并使用配置适配器在网页上呈现经过适当自定义的图表
目前,数据可以呈现为以下图表类型:
- 折线图
- 面积图
- 散点图
- 火花谱线图
- 单个值
- 条形图
- 列
- 表
- 饼图
更多图表类型正在开发中。
要查看每种图表类型的属性表,请访问可视化和查询属性表文档页面。
如需查看每种图表类型的可用配置选项,请参阅 Looker 界面组件参考文档。
为什么要使用可视化组件?
可视化组件可改进和简化在应用内从 Looker 呈现可视化内容的过程,释放开发者时间,并为开发者提供更多选项,让他们可以通过 Looker 自定义和扩展可视化内容。
- 改进的嵌入功能 - 借助可视化组件,开发者可以在没有 iframe 的应用中嵌入 Looker 可视化图表。这可以提高性能、监控效果和自定义能力。
- 轻松集成 - 然后,可视化组件可与
@looker/components
中的其他组件结合使用,以创建全新的组合和前端体验。 - 自定义 - 使用可视化图表组件时,自定义嵌入式可视化图表比使用 iframe 时更容易。此外,借助可视化组件,开发者可以更快地创建高度自定义的应用,而无需从头开始创建可视化层。
- 简化 - 可视化组件可提高 Looker 可视化图表的可移植性并简化与 Looker API 的互动。
安装可视化组件
首先,请添加 Looker 可视化组件的 NPM 软件包:
- NPM:
npm install @looker/visualizations
- YARN:
yarn add @looker/visualizations
您还需要满足一些对等依赖项 - Looker/组件、React 和样式化组件:
- NPM:
npm install @looker/components react react-dom styled-components
- YARN:
yarn add @looker/components react react-dom styled-components
如需了解如何安装和使用可视化组件软件包,请参阅 GitHub 和 NPM 中的 README 文档。
后续步骤
- 使用可视化组件和
dashboard
属性呈现简单的可视化图表 - 使用可视化组件和
query
属性呈现简单的可视化图表 - 使用可视化组件呈现自定义可视化图表
- 使用可视化组件构建自定义可视化图表
- 可视化图表和查询属性表