Skip to content
← 返回 hands-on-data-visualization
← 返回 hands-on-data-visualization

ch-0010 Chapter 9: Embed On the Web

  • 原书章节: Chapter 9 Embed On the Web（pp. 249–264）
  • 输入来源: 本地 pdf（HandsOnDataViz.pdf）

摘要

前面章节做出了交互式图表/地图/表格，本章解决"如何放进你自己的网站"：核心是 iframe 标签——一个把"别的网站上的活动页面"嵌进"你控制的页面"的代码标签，读者看 起来像无缝内嵌，无需知道内容来自第三方平台。

  • 静态图 vs 交互 iframe：静态图（JPG/PNG/PDF）适合文档、幻灯片；动画 GIF 是静态 序列；而交互式可视化让读者直接操作。嵌入交互内容用 iframe（或工具提供的 embed code）
  • iframe 结构：<iframe src="..."></iframe>，可带 width/height 等属性；Datawrapper 等工具生成的 embed code 就是一段包含 iframe 的 HTML
  • 获取 embed code：Google Sheets / Datawrapper / Tableau Public 各自提供"发布/嵌入" 入口；Tableau Public 若平台不收完整 embed code，可退而用其页面链接
  • 粘贴到网站：WordPress（方法 A 直接粘贴——简单但有时不可靠；方法 B 用自定义 HTML 块/修改主题——更稳）、SquareSpace（embed block）、Wix 等；长代码建议放到 HTML 块而非富文本编辑器
  • 嵌入后务必在目标站点刷新验证，注意响应式（小屏自适应）问题

要点归纳

  • iframe 是"画框"：在第二页里显示第一页的活动内容，读者无感知
  • embed code 的本质 = 一段含 iframe 的 HTML，可以复制到任何接受 HTML 的站点
  • 静态 vs 交互的选择：按发布介质（打印/PPT 用静态；网页用交互）
  • WordPress 里"直接粘贴 embed"（方法 A）可能被富文本编辑器破坏，方法 B（代码块/ 主题修改）更可靠
  • 长 embed code 放 HTML/代码块里，避免编辑器自动转换

术语 / 概念

  • iframe — 在网页中嵌入另一个网页的 HTML 标签
  • embed code（嵌入代码） — 工具平台生成的、含 iframe 的 HTML 片段
  • static image（静态图） — 不可交互的图片（JPG/PNG/PDF/GIF）
  • responsive（响应式） — 布局随屏幕尺寸自适应（如 iframe 用宽高比容器）

原句摘录

Like a picture frame, an iframe displays a live web page (such as your interactive data visualization) inside a second web page that you control (such as your personal or organizational web site).

疑问 / 待查

  • ch-0017 附录有 "Common iframe errors" 排查清单，遇到嵌入问题先看那里
  • 本站在 MkDocs 中嵌入 iframe 的实践可与 ch-0010 对照
Backlinks (1) 
flowchart LR
  n0["ch-0001 Introduction（为什么做数据可视化）"]
  n1["ch-0002 选工具讲你的数据故事（Ch 1）"]
  n2["ch-0003 强化电子表格技能（Ch 2）"]
  n3["ch-0004 找到并质询你的数据（Ch 3）"]
  n4["ch-0005 清洗脏数据（Ch 4）"]
  n5["ch-0006 做有意义的比较（Ch 5）"]
  n6["ch-0007 图表化你的数据（Ch 6）"]
  n7["ch-0008 地图化你的数据（Ch 7）"]
  n8["ch-0009 表格化你的数据（Ch 8）"]
  n9["ch-0010 嵌入网页（Ch 9）"]
  n10["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
  n11["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
  n12["ch-0013 Leaflet 地图模板（Ch 12）"]
  n13["ch-0014 转换你的地图数据（Ch 13）"]
  n14["ch-0015 识别谎言、减少偏差（Ch 14）"]
  n15["ch-0016 讲述并展示你的数据故事（Ch 15）"]
  n16["ch-0017 附录 A 排查常见问题"]
  n17["Hands-On Data Visualization（整理完成）"]
  n18["Hands-On Data Visualization 笔记"]
  n19["Reading"]
  n17 --> n0
  n17 --> n1
  n17 --> n2
  n17 --> n3
  n17 --> n4
  n17 --> n5
  n17 --> n6
  n17 --> n7
  n17 --> n8
  n17 --> n9
  n17 --> n10
  n17 --> n11
  n17 --> n12
  n17 --> n13
  n17 --> n14
  n17 --> n15
  n17 --> n16
  n17 --> n18
  n19 --> n17
  click n0 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
  click n1 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
  click n2 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
  click n3 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
  click n4 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
  click n5 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
  click n6 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
  click n7 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
  click n8 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
  click n9 "./" "ch-0010 嵌入网页（Ch 9）"
  click n10 "../ch-0011/" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
  click n11 "../ch-0012/" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
  click n12 "../ch-0013/" "ch-0013 Leaflet 地图模板（Ch 12）"
  click n13 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
  click n14 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
  click n15 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
  click n16 "../ch-0017/" "ch-0017 附录 A 排查常见问题"
  click n17 "../" "Hands-On Data Visualization（整理完成）"
  click n18 "../notes/" "Hands-On Data Visualization 笔记"
  click n19 "../../" "Reading"