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

Question

我已经构建了一个情节交互式仪表板，并且正在寻找一种方法将此应用程序导出为 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)

但是不起作用。

Answer 1

所以我认为你需要的答案是“这是不可能的”。

为了澄清将仪表板转换为 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“仪表板”的限制。您可以显示/隐藏以及将鼠标悬停在点上，但是您无法合并在没有服务器端的情况下更改值的滑块，或者隐藏在某处的非常臃肿且复杂的显示/隐藏逻辑。

Answer 2

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()

Answer 3

Answer 4

https://gist.github.com/exzhawk/33e5dcfc8859e3b6ff4e5269b1ba0ba4

相关问题：https://github.com/plotly/dash/issues/1056#issuecomment-997439760

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

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

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

Answer 5

pythonanywhere

免费部署您的 dash 应用程序。 有关详细信息，请参阅

https://towardsdatascience.com/the-easiest-way-to-deploy-your-dash-app-for-free-f92c575bb69e

。