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

Posted 2023-02-16

【中文标题】如何将绘图仪表板应用程序导出到 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)

但它不起作用。

【问题讨论】：

你不能。实际上有一些方法可以向静态绘图添加简单的回调，否则您应该生成所有可能的绘图文件并使用html 和css。

谢谢@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文件兄弟。不再有花哨的回调。您只能保存初始状态，而不是理想的“单击保存按钮时的当前布局”。