Altair图表在VSCode正常显示，推送GitHub后无法展示求解决方案

核心原因 #

GitHub的Markdown渲染器不支持直接渲染Altair生成的交互式Vega-Lite对象，VSCode因有对应插件支持本地渲染，所以两者表现不同；而Seaborn生成的是静态位图，自然能在两边正常显示。

具体解决方案 #

方案1：导出为静态图片嵌入Markdown

这是最稳妥的方式，将Altair图表转为PNG/JPG等静态格式，GitHub可直接识别显示：

1. 安装依赖库altair_saver：

   pip install altair_saver
   

   （若安装失败，可能需要额外安装selenium或对应浏览器驱动，根据系统环境调整）
2. 在代码中导出图表：

   import altair as alt
   # 假设你的图表对象是chart
   chart = alt.Chart(data).mark_bar().encode(...)
   # 导出为PNG
   chart.save("my_altair_chart.png")
   

3. 在Markdown文件中引用该图片：

   ![Altair图表描述](my_altair_chart.png)
   

方案2：使用GitHub原生支持的Vega-Lite代码块渲染

GitHub原生支持渲染Vega-Lite格式的JSON代码，步骤如下：

1. 获取图表的Vega-Lite JSON配置：

   import altair as alt
   chart = alt.Chart(data).mark_bar().encode(...)
   # 打印或保存JSON内容
   print(chart.to_json())
   

2. 在Markdown文件中创建vega-lite类型的代码块，粘贴上述JSON内容：

   {
     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
     "data": {"url": "data/cars.json"},
     "mark": "bar",
     "encoding": {
       "x": {"field": "Origin", "type": "nominal"},
       "y": {"field": "Horsepower", "type": "quantitative", "aggregate": "mean"}
     }
   }
   

方案3：生成静态SVG嵌入（可选）

若不需要交互功能，可让Altair直接生成SVG并嵌入Markdown：

import altair as alt
chart = alt.Chart(data).mark_bar().encode(...)
# 生成SVG字符串
svg_str = chart.to_svg()
# 将SVG内容直接写入Markdown，或保存为.svg文件后通过图片链接引用

关于你尝试的渲染器问题 #

alt.renderers.enable("mimetype")仅在支持对应MIME类型的本地环境（如VSCode、Jupyter Notebook）生效，GitHub不识别该类型，所以只会显示对象占位符；default渲染器依赖本地前端环境，同样无法在GitHub中工作，无需再尝试这两种方式。

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