如何将Plotly生成的HTML动态气泡图嵌入Google Data Studio？

我之前也碰到过类似的需求，把Plotly可视化嵌入Data Studio确实需要先搞定托管和iframe兼容的问题，下面一步步给你说清楚：

1. 把你的Plotly HTML文件托管成可访问的公开URL #

你需要把本地的HTML文件放到一个支持静态文件托管的平台上，这样Data Studio才能通过URL访问到它。推荐几个好用的选项：

GitHub Pages（免费且易操作） #

• 新建一个GitHub仓库，把你的Plotly HTML文件上传进去（如果有依赖资源比如本地JS/CSS，也一起传）
• 进入仓库的「Settings」页面，找到「Pages」选项，把源设置为「main分支 / root目录」，点击保存
• 等待几分钟，GitHub会生成一个类似 https://你的用户名.github.io/仓库名/你的文件名.html 的公开URL

Google Cloud Storage（和Google生态完美兼容） #

• 打开Google Cloud控制台，创建一个存储桶，把存储桶的权限设置为「公开可读」（注意只给对象读权限就行，别开全桶公开）
• 上传你的Plotly HTML文件到存储桶里
• 点击文件详情里的「公开访问链接」，就能得到可以嵌入的URL

Netlify（一键部署，适合快速测试） #

• 访问Netlify官网，用GitHub/GitLab账号登录，选择「New site from Git」
• 选择存放HTML文件的仓库，Netlify会自动检测并部署，部署完成后就能拿到一个公开URL

2. 确保你的HTML允许被Data Studio嵌入 #

Plotly导出的HTML默认是支持iframe嵌入的，但有些托管平台会限制iframe加载，需要注意：

• 如果用GitHub Pages/Netlify，默认不需要额外设置，它们允许跨域嵌入
• 如果用Google Cloud Storage，需要给存储桶配置CORS规则，允许Data Studio的域名（https://datastudio.google.com）加载内容。你可以通过gcloud命令或者控制台设置CORS配置文件，示例配置如下：

[
  {
    "origin": ["https://datastudio.google.com"],
    "method": ["GET"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

另外，导出Plotly HTML时，建议选择「Include Plotly.js from CDN」选项，这样HTML文件里不会包含庞大的Plotly库，加载更快，也避免本地依赖丢失的问题。

3. 在Google Data Studio里嵌入URL #

• 打开你的Data Studio报表，点击顶部菜单栏的「添加」→「嵌入」→「URL嵌入」
• 在弹出的配置框里，粘贴你托管好的HTML文件URL
• 调整嵌入组件的大小和位置，点击「应用」，就能看到你的动态气泡图出现在报表里了

常见问题排查 #

• 如果嵌入后显示空白：检查URL是否能在浏览器正常打开，确认托管平台没有限制iframe，或者查看浏览器控制台的报错信息（通常是CORS或iframe权限问题）
• 如果图表加载慢：确保Plotly用的是CDN链接，托管平台的节点离你的用户近一些

内容的提问来源于stack exchange，提问作者Vivian Ko