如何将绘图仪表板应用程序导出到 html 独立文件以与其他人共享?

Posted

技术标签:

【中文标题】如何将绘图仪表板应用程序导出到 html 独立文件以与其他人共享?【英文标题】:How to export a plotly dashboard app into a html standalone file to share with the others? 【发布时间】:2020-05-22 15:40:51 【问题描述】:

我已经构建了一个交互式仪表板,并且正在寻找一种将这个应用程序导出为 html 格式并与他人共享的方法。

有什么提示吗?

我用谷歌搜索过,大多数答案都将我转到以下链接。

https://plot.ly/python/getting-started-with-chart-studio/

我已经尝试过:

import plotly.io as pio

pio.write_html(app, file='hello_world.html', auto_open=True)

在我的 app.py 之后:

if __name__ == "__main__":
    app.run_server(debug=True, port=8052)

但它不起作用。

【问题讨论】:

你不能。实际上有一些方法可以向静态绘图添加简单的回调,否则您应该生成所有可能的绘图文件并使用htmlcss 谢谢@rpanai,能不能请你给我一些关于这方面的文章,以便我检查一下? 【参考方案1】:

假设您的应用程序有许多相互关联的组件,我建议您将您的 plotly dash 应用程序部署到 heroku:https://dash.plot.ly/deployment

如果您有多个图形对象,您可以使用以下代码将它们单独导出为 html:

plotly.offline.plot(
  # Your plotly go figure here
  show_link=False,
  filename = 'my_file.html'
)

或者,如果您想嵌入图表:

from plotly.offline.offline import _plot_html
#Only for embedding
embedable_chart = plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
f = open("embedable_chart.text", "w")
f.write(embedable_chart)
f.close()

【讨论】:

谢谢你回答我,你能详细说明一下我应该把这些sn-ps放在哪里吗? 对不起我的愚蠢问题,但有什么例子可以参考吗? 是的,请参阅此要点 - 下载到您的计算机并打开 html gist.github.com/ybressler/e0d40e63a5f35cf2dda65378333c6436 谢谢@Yaakow Bressler。这是一个图表,因为现在我有一个仪表板,里面有几个图表,它链接到一个 csv 数据文件。那么如何使它成为一个独立的 html 文件呢?而且我不需要它从 csv 文件中获取更新。有什么办法吗? 哥特雅。我建议部署到 Heroku、AWS 或 GCloud 等 Web 服务器。 Heroku 非常简单,请查看我原帖中的链接。【参考方案2】:

所以我认为您需要的答案是“无法完成”。

澄清将仪表板转换为 HTML 的重复要求:

HTML 是一种标记语言;它以美观的方式显示文本,您可以使用 CSS 来提高美观度。

交互性 的概念就像一个仪表板,其中 onClick() 会导致视觉效果发生变化,因为重新查询或过滤或重新计算 csv 文件是服务器端为 HTML 带来的/CSS/javascript 前端。

您不能仅在 HTML 文件中拥有一个完全封装且具有交互性的仪表板。您必须将服务器端逻辑带到表中。这就是为什么每个人都提到 Heroku、AWS 等的原因。

现在,如果您的仪表板不是交互式的,它实际上只是一堆带有一些基本悬停效果的静态视觉效果;然后一个独立的 HTML 文件可以读取包含悬停在​​准备好的文本上的 SVG。这就是 plotly 的 write_html 所做的(我的理解是 plotly.offline.plot 只是在后台使用它或类似的东西)。

其他人指出的要点,在此重复:

https://gist.github.com/ybressler/e0d40e63a5f35cf2dda65378333c6436

仅显示 HTML“仪表板”的限制。您可以显示/隐藏和将鼠标悬停在点上,但如果没有服务器端或隐藏在某处的非常臃肿和复杂的显示/隐藏逻辑,则无法合并更改值的滑块。

【讨论】:

【参考方案3】:

我的解决方法:https://gist.github.com/exzhawk/33e5dcfc8859e3b6ff4e5269b1ba0ba4 相关问题:https://github.com/plotly/dash/issues/1056#issuecomment-997439760

查看演示: 下载 Python 文件并运行它。您将看到一个简单的条形图和一个表格。点击左上角按钮后,您会在 Python 文件旁边找到一个名为“target”的文件夹。您将在其中拥有一个完全离线的静态 HTML 文件,其中包含所需的所有其他文件(希望如此)。您可以停止 Python 并直接在“目标”文件夹中打开 index.html。您可以将整个“目标”文件夹发送给其他人,让他们在没有任何 Python 运行时或 HTTP 服务器的情况下打开它,只需使用浏览器即可。

在引擎盖下: 代码实际上很简单但很hacky。 dash 网页依赖 ajax 通信来获取 JSON 数据以进行渲染。因此 make_static 函数会下载所有资源和 JSON,将 JSON 修补到 index.html 文件中,并告诉页面中的脚本从 index.html 获取数据,而不是向 Python 后端请求。

限制: 这是一个静态HTML文件兄弟。不再有花哨的回调。您只能保存初始状态,而不是理想的“单击保存按钮时的当前布局”。

【讨论】:

以上是关于如何将绘图仪表板应用程序导出到 html 独立文件以与其他人共享?的主要内容,如果未能解决你的问题,请参考以下文章

如何将现有仪表板复制到Appdynamics中的新项目中

如何链接下拉菜单选项以在 Tableau 中显示本地 HTML 文件?

如何将多层 OpenOffice 绘图导出为多层 PDF 文件?

R:如何将绘图/图形导出为 png 或 pdf 文件

将 HTML 另存为独立页面:导出工具?

R: 导入 csv 文件,导出到csv文件,;绘图后导出为图片pdf等