嵌入式分析 SDK

使用嵌入式分析 SDK，您可以通过 React 嵌入独立的 Metabase 组件（例如独立的图表、仪表板、查询构建器等）。您可以管理每个组件的访问和交互性，并提供高级自定义功能，以实现无缝样式设计。

使用嵌入式分析 SDK 构建的示例应用程序

为了让您了解 SDK 的可能性，我们在 metaba.se/sdk-demo 上提供了示例网站。在不同的商店网站之间导航。查看它们并浏览其产品和分析部分，以及“新建问题”和“新建仪表板”选项。

这是 Shoppy 源代码。

嵌入式分析 SDK 先决条件

• 使用 React 18 或 React 19 的 React 应用程序。
• Node.js 20.x 或更高版本。
• Metabase 1.52 或更高版本。

快速入门

• 快速入门（如果您有 Metabase 和一个应用程序）
• 快速入门 CLI（如果您有一个应用程序，但没有 Metabase）
• 使用示例 React 应用程序快速入门（如果您两者都没有）

安装

要使用 SDK，您需要在 Metabase 中启用 SDK，并在您的 React 应用程序中安装 SDK。

在 Metabase 中启用 SDK

通过转到 **管理设置 > 设置 > 嵌入** 来启用嵌入式分析 SDK。切换 SDK，然后点击 **配置**。输入您想要允许 SDK 嵌入的网站或应用程序的来源，用空格分隔。本地主机会自动包含在内。

在您的 React 应用程序中安装 SDK

您可以通过 npm 为 React 安装嵌入式分析 SDK。请确保使用与您的 Metabase 版本对应的 dist-tag，例如：Metabase 53 的 53-stable。

npm install @metabase/embedding-sdk-react@53-stable

或使用 yarn

yarn add @metabase/embedding-sdk-react@53-stable

解决 @types/react 版本不匹配问题

在极少数情况下，嵌入式 SDK 和您的应用程序可能使用不同主版本的 @types/react，导致 TypeScript 冲突。

为了在所有依赖项中强制使用单个 @types/react 版本，请在您的 package.json 中添加 overrides (npm) 或 resolutions (Yarn) 部分，并指定您的应用程序使用的 @types/react 版本。

NPM 设置 @types/react 版本

{
  "overrides": {
    "@types/react": "..."
  }
}

Yarn 设置 @types/react 版本

{
  "resolutions": {
    "@types/react": "..."
  }
}

使用嵌入式分析 SDK 进行开发

从快速入门开始，然后查看这些页面以获取有关组件、主题等的更多信息。

• 身份验证
• 问题
• 仪表盘
• 外观
• 集合
• 插件
• 配置
• 版本控制
• Next.js 注意事项

嵌入式分析 SDK 源代码

您可以在 Metabase 仓库中找到嵌入式分析 SDK 源代码。

更新日志

查看 SDK 的更新日志

• 56-stable
• 55-stable
• 54-stable
• 53-stable
• 52-stable

NPM 上的嵌入式分析 SDK

查看 NPM 上的 Metabase 嵌入式分析 SDK：metaba.se/sdk-npm。

SDK 限制

SDK 不支持

• 已验证内容
• 官方集合
• 订阅
• 提醒
• 服务器端渲染 (SSR)

其他限制

• 同一应用程序页面上的多个**交互式**仪表板。如果您需要在同一应用程序页面上嵌入多个仪表板，您可以嵌入静态仪表板。
• 如果您的应用程序中存在 Leaflet 1.x 作为依赖项，您可能会遇到兼容性问题。您可以尝试使用 Leaflet 2.x。

问题、功能请求和支持

错误 和 功能请求 在 GitHub 上进行跟踪。

您可以通过在问题上留下一个竖拇指表情符号来支持现有的功能请求。欢迎留下带有上下文的评论，这可能很有用。阅读更多。

在创建新问题之前，请确保您的D问题或功能请求尚未存在。寻求帮助

• 付费客户可以通过常规渠道联系我们的成功团队。
• 使用开源版的用户可以在我们的讨论论坛上发帖。