如何在GitHub.io页面嵌入含Google Chart的Gist？已尝试多法未果

先聊聊你之前尝试的方法为什么行不通：

• 直接用<script>引入整个HTML文件：浏览器会把这个HTML文件当作JavaScript脚本解析，语法完全不匹配，肯定跑不起来
• <image>标签完全不适用，它只支持JPG/PNG这类图片格式，HTML文件不是图片资源，自然无法显示
• {% gist %}标签：Jekyll的这个标签只是把Gist里的代码渲染成代码块，不会执行里面的Google Chart脚本——GitHub Pages出于安全考虑，会限制用户上传的脚本在页面中运行

下面给你两个可行的解决方案：

方案一：直接复用Gist中的图表代码到github.io页面 #

这是最稳妥的方式，步骤如下：

1. 打开你的Gist，复制里面的核心代码：
   • 用于承载图表的<div>容器（比如<div id="calendar_basic" style="width: 900px; height: 375px;"></div>）
   • 加载Google Charts的脚本和绘制图表的逻辑代码
2. 在你的github.io页面的合适位置，粘贴这些代码
3. 确保页面中只加载一次Google Charts的CDN（如果Gist里已经包含了<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>，就不用重复添加）

示例代码片段（参考你的Gist内容）：

<div id="calendar_basic" style="width: 900px; height: 375px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["calendar"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id: 'Issues' });
    dataTable.addRows([
      // 这里粘贴你Gist里的数据行
    ]);
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
    var options = {
      // 这里粘贴你Gist里的图表配置
    };
    chart.draw(dataTable, options);
  }
</script>

方案二：用iframe嵌入整个Gist的HTML页面 #

如果你不想改动页面代码，只想直接嵌入整个Gist的渲染结果，可以用iframe标签。注意要替换掉已经失效的cdn.rawgit.com链接（这个服务已经停止了），改用可用的CDN比如raw.githack.com：

<iframe 
  src="https://raw.githack.com/whanley/71bc1fac509a23b93a3a89b51af32bf8/raw/d98c33c8fbf5ee67a89395c0e435ac9568bcd0c1/dig-eg-gaz-issues-calendar-chart.html"
  width="100%" 
  height="600" 
  frameborder="0"
  scrolling="no"
></iframe>

• 调整width和height参数来适配你的页面布局
• scrolling="no"可以去掉iframe的滚动条，让图表显示更整洁

额外注意事项 #

• 确保你的github.io页面可以正常访问Google Charts的CDN（部分网络环境可能需要特殊配置）
• 如果用iframe方案，要确认目标HTML文件的链接是公开可访问的
• 测试时可以先在本地预览页面，再推送到GitHub Pages，避免不必要的调试麻烦

内容的提问来源于stack exchange，提问作者Will Hanley