如何在GitHub中显示Jupyter Notebook里的Plotly图表？

GitHub默认无法渲染Plotly的交互式动态图表，因为fig.show()生成的是依赖JavaScript的内容，GitHub不支持解析这类动态元素。以下是几种实用的解决办法：

方法一：导出静态图片嵌入Notebook #

把Plotly图表保存为静态图片，再在Notebook中显示，上传时连同图片文件一起提交：

1. 先安装静态导出依赖：

   pip install kaleido
   

2. 修改你的图表代码：

   #Pie chart that shows the percentage of top 50 (according to pp90min) per team
   top_50_players_injured_pp90min = draft_selection_stats_injured.sort_values('points_per_90_minutes_played', ascending=False).head(50)
   team_prop_pp90min_injured = top_50_players_injured_pp90min.groupby('team').count().reset_index()
   fig = px.pie(team_prop_pp90min_injured, values='player', names='team', title='Top 50 Injured/Rotating/Transferred Players (pp90min) Per Team')
   
   # 导出为静态图片并在Notebook中显示
   from IPython.display import Image
   fig.write_image("team_pie_chart.png")
   Image("team_pie_chart.png")
   

3. 运行代码后保存Notebook，将生成的team_pie_chart.png和Notebook文件一起上传到GitHub，就能看到图表了。

方法二：直接渲染静态PNG到Notebook #

无需额外保存图片文件，修改渲染器参数直接生成静态图表：

1. 同样先安装kaleido：

   pip install kaleido
   

2. 修改fig.show()的渲染器：

   #Pie chart that shows the percentage of top 50 (according to pp90min) per team
   top_50_players_injured_pp90min = draft_selection_stats_injured.sort_values('points_per_90_minutes_played', ascending=False).head(50)
   team_prop_pp90min_injured = top_50_players_injured_pp90min.groupby('team').count().reset_index()
   fig = px.pie(team_prop_pp90min_injured, values='player', names='team', title='Top 50 Injured/Rotating/Transferred Players (pp90min) Per Team')
   # 指定png渲染器，直接在Notebook中嵌入静态图表
   fig.show(renderer="png")
   

3. 运行后保存Notebook，上传GitHub即可看到静态图表，无需额外上传图片。

方法三：生成轻量化HTML文件（解决原HTML过大问题） #

如果偏好HTML格式，用nbconvert生成精简版HTML：

1. 执行以下命令转换Notebook：

   jupyter nbconvert --to html --no-input --execute your_notebook.ipynb
   

   • --no-input：移除代码块，只保留文本和图表输出，大幅压缩体积
   • --execute：确保所有代码运行并渲染完成后再转换
2. 转换得到的HTML文件体积会小很多，可直接上传GitHub查看。

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