如何使用vegaEmbed将Altair可视化嵌入HTML文档

渲染失败的核心原因是浏览器同源安全策略限制：你直接双击本地HTML文件时，页面是通过file://协议加载的，这种情况下浏览器默认禁止页面内的JavaScript读取本地磁盘上的其他文件，哪怕你写的磁盘路径完全正确，vegaEmbed也拿不到chart.json的内容，自然无法渲染图表。

• 先确认报错类型
  打开页面按F12调出浏览器开发者工具，切换到Console面板，你大概率能看到类似「Cross origin requests are only supported for protocol schemes: http, data, chrome, https」的报错，这就可以确认是本地文件协议的限制问题。
• 用本地静态服务器运行页面，禁止直接双击打开HTML
  任选一种你方便的方式启动本地服务即可，都是前端开发时的常规操作：
  • 如果你安装了Python，进入HTML和chart.json所在的文件夹，打开终端执行python -m http.server（Python3版本），执行完成后在浏览器访问http://localhost:8000，找到对应HTML文件打开即可
  • 如果你使用VS Code编写代码，直接安装Live Server扩展，右键点击HTML文件选择「Open with Live Server」，扩展会自动启动本地服务并打开页面
• 修正文件路径写法
  启动本地服务后，不要写C:/Users/myName/chart.json这种本地磁盘绝对路径，把chart.json和HTML文件放在同一目录下，vegaEmbed的参数直接写'chart.json'即可，这里的路径是相对于HTML页面的HTTP访问路径，不是本地磁盘路径。
• 排除图表配置本身的问题
  可以先把chart.json的内容直接内嵌到页面里测试，排除依赖加载、图表配置错误的问题，示例代码如下：

  <script>
    // 将下方对象替换为你自己chart.json里的完整配置内容
    const chartSpec = {
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    }
    vegaEmbed('#vis', chartSpec);
  </script>
  

  如果内嵌配置后图表可以正常渲染，说明你引入的vega、vega-lite、vega-embed依赖完全正常，问题就出在本地文件加载环节。

不要通过修改浏览器安全配置、加浏览器启动参数的方式绕开跨域限制，这类方法有明确的安全风险，仅适合极端临时测试场景，使用本地静态服务器是官方推荐的标准开发方案。

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