时间戳

首页 > 解决方案 > 使用 python-plotly 在按钮单击时打开 html 文件

python-2.7 - 使用 python-plotly 在按钮单击时打开 html 文件

问题描述

我正在编写一个 python 脚本，它从一个文件中读取并用 plotly 在单独的 html 文件中绘制图形。我想要一个按钮来从一个页面重定向到另一个页面（从光盘加载）。我遇到了这个：

updatemenus = list([
dict(type="buttons",
buttons=list([dict(label = 'Next',method = 'update', args = ['shapes', []])])
)])

layout=go.Layout(title="Iteration_Number:"+str(counter_iter),updatemenus=updatemenus)

但这用于更新数据或更改布局。我想要的是在按钮单击时从光盘打开另一个 html 页面。那可能吗 ？

我也看到了这个：

import webbrowser
url = "file:///home/tinyOS/Simulation_"+str(counter_iter+1)+".html"

webbrowser.open(url)

这可以帮助我打开一个新页面，但我再次希望它在单击按钮时发生。有什么想法吗？非常感谢 ！

标签： python-2.7plotly

解决方案

从问题中，我了解到您想要在绘图图上使用一组按钮，这些按钮将在新选项卡中打开绘图图。

所以你不需要使用 plotly 按钮来满足这个要求。因为它们主要用于restyle,relayout等，所以这些按钮和在新标签中打开链接之间没有关系。

我建议使用简单的 html 按钮，点击后会带您进入新选项卡。

一个简单的方法是，将绘图包装div到相对定位中，并使div包装按钮绝对定位并将其放置在图形上的任何位置，请参考下面的示例，如果这能解决您的问题，请告诉我！

解决方案：

import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as py_offline
from IPython.core.display import display, HTML
py_offline.init_notebook_mode()

display(HTML("""
<style>
.wrapper{
    position:relative;
}
.button-group{
    position:absolute;
    top:40px;
    left:90%;
    z-index: 30000;
}
.button-group a{
    display:block;
}
</style>
"""))

上面这段代码中发生的事情是，首先我们包含必要的包，然后是所需的样式！

data = [go.Bar(
            x=['giraffes', 'orangutans', 'monkeys'],
            y=[20, 14, 23]
    )]

display(HTML("""
<div class="wrapper">
    <div class="button-group">
    <a href="http://google.com" target="_BLANK">Google It</a>
    <a href="http://yahoo.com" target="_BLANK">Yahoo It</a>
</div>"""
    +str(py_offline.plot(data, filename='plot_name' ,output_type="div", include_plotlyjs=False)) 
+ '</div>'))

我们嵌入按钮的主要代码如上所示，首先我们定义 plotly plot ，然后使用display and html函数，我们可以将按钮嵌入到一个div类button-group中，并使用 CSS 来定位该按钮。

请尝试上面的代码，如果对工作有任何疑问，请告诉我！

推荐阅读