在GitHub Pages上显示交互式绘图图(.html文件) [英] Display interactive plotly chart (.html file) on GitHub Pages

问题描述

我创建了以下这样的情节图:

I've created the following plotly plot like this:

import plotly
labels = ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen']
values = [4500, 2500, 1053, 500]

trace = plotly.graph_objs.Pie(labels=labels, values=values)
plotly.offline.plot([trace], filename='basic-pie-chart')

然后我这样创建了html:

Then I created the html as such:

print(plotly.offline.plot([trace], include_plotlyjs=False, output_type='div'))

运行上面的代码会生成一个.html文件，我可以在浏览器中查看该文件.

Running the code above generates an .html file that I can view in my browser.

是否可以在GitHub Pages的markdown文件中间显示.html文件，以便我可以使用plotly的交互功能?

Is there a way to display the .html file in the middle of a markdown file on my GitHub Pages, so I can use the interactive features of plotly?

这是我问的类似问题

推荐答案

如果您在GitHub页面站点中使用 Jekyll

If you use Jekyll in your GitHub pages site.

准备数据:

import plotly.graph_objects as go

labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500, 2500, 1053, 500]
fig = go.Figure(data=[go.Pie(labels=labels, values=values)])
fig.show()

生成HTML文件:

import plotly.io as pio

pio.write_html(fig, file='figure.html', auto_open=True)

上传figure.html文件并将其提交到网站存储库根目录中的_includes文件夹中.

Upload the figure.html file and commit it to _includes folder in the root of your site repository.

现在，如果您使用 markdown 创建帖子，则可以使用 include 标记，并在帖子中调用figure.html，如下所示:

Now if you are using markdown to create your posts, you can use include tag and call figure.html in your post with something like this:

{% include figure.html %}

将此行提交到_posts文件夹中的帖子.md文件中.检查结果.

Commit this line to your post .md file in the _posts folder. Check results.

这篇关于在GitHub Pages上显示交互式绘图图(.html文件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！