使用 Bottle 将 Plotly 图嵌入网页

Posted

技术标签:

【中文标题】使用 Bottle 将 Plotly 图嵌入网页【英文标题】:Embed Plotly graph into a webpage with Bottle 【发布时间】:2013-10-21 19:45:00 【问题描述】:

您好,我正在使用 Python、Bottle 生成图表。但是,这会返回一个 url。 喜欢:

https://plot.ly/~abhishek.mitra.963/1

我想将整个图表粘贴到我的网页中,而不是提供链接。这可能吗?

我的代码是:

import os
from bottle import run, template, get, post, request
from plotly import plotly

py = plotly(username='user', key='key')

@get('/plot')
def form():
    return '''<h2>Graph via Plot.ly</h2>
              <form method="POST" action="/plot">
                Name: <input name="name1" type="text" />
                Age: <input name="age1" type="text" /><br/>
                Name: <input name="name2" type="text" />
                Age: <input name="age2" type="text" /><br/>
                Name: <input name="name3" type="text" />
                Age: <input name="age3" type="text" /><br/>                
                <input type="submit" />
              </form>'''

@post('/plot')
def submit():
    name1   = request.forms.get('name1')
    age1    = request.forms.get('age1')
    name2   = request.forms.get('name2')
    age2    = request.forms.get('age2')
    name3   = request.forms.get('name3')
    age3    = request.forms.get('age3')

    x0 = [name1, name2, name3];
    y0 = [age1, age2, age3];
    data = 'x': x0, 'y': y0, 'type': 'bar'
    response = py.plot([data])
    url = response['url']
    filename = response['filename']
    return ('''Congrats! View your chart here <a href="https://plot.ly/~abhishek.mitra.963/1">View Graph</a>!''')

if __name__ == '__main__':
    port = int(os.environ.get('PORT', 8080))
    run(host='0.0.0.0', port=port, debug=True)

【问题讨论】:

有没有考虑在烧瓶中使用模板? 我有模板。但它有什么帮助呢? 【参考方案1】:

是的,嵌入是可能的。这是您可以使用的 iframe sn-p(与任何 Plotly URL):

&lt;iframe width="800" height="600" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~abhishek.mitra.963/1/.embed?width=800&amp;height=600"&gt;&lt;/iframe&gt;

情节嵌入在专门用于嵌入情节的 URL 中。所以在这种情况下,你的情节是https://plot.ly/~abhishek.mitra.963/1/。嵌入它的 URL 是通过在 URL 中添加 .embed 来生成的:https://plot.ly/~abhishek.mitra.963/1.embed。

您可以更改该 sn-p 中的宽度/高度尺寸。要获取 iframe 代码并查看不同的大小,您可以单击绘图上的嵌入图标,或者在共享它时生成代码。这是嵌入选项的位置:

Here's how an embedded graph looks in the Washington Post。 here 是一个有用的教程,有人使用 Plotly 和 Bottle 进行开发。

如果这不起作用,请告诉我,我很乐意提供帮助。

披露:我在 Plotly 团队。

【讨论】:

我正在寻找类似的东西。我的情况是每隔 5 分钟运行一次 python 代码并更新相同的图。相反,我每次都会得到新的窗口。我正在尝试嵌入网页的 iframe,因此需要更新相同的情节。我有 20 个这样的地块。 情节 URL 来自 API,对吗?有没有办法用最近发布的离线库来做这样的事情?

以上是关于使用 Bottle 将 Plotly 图嵌入网页的主要内容,如果未能解决你的问题,请参考以下文章

将 Plotly 交互式图表嵌入博客而不丢失动画

如何在 HTML 网页中显示多个 Plotly 图? (使用 plot_div)

将破折号图嵌入到html中

Plotly:如何使用 plotly.graph_objects 将两个 3D 图放在同一个图上?

使用 matplotlib 将时间序列图转换为 plotly

Python将瀑布图转换为plotly