如何将交互式仪表板应用程序导出为 html 独立文件以将其嵌入您的网站？

Posted 2023-02-18

【中文标题】如何将交互式仪表板应用程序导出为 html 独立文件以将其嵌入您的网站？

【英文标题】：How to export an interactive dashboard app into a html standalone file to embed it to your website?

【发布时间】：2021-08-10 01:21:27

【问题描述】：

所以我在 python 中使用 plotly 制作了一个交互式仪表板。我部署了应用程序并将可视化图转换为静态 html 文件。但是，如果我也想嵌入包括非静态组件在内的整个仪表板怎么办。我的目标是开发一个简单的交互式仪表板，它以 csv 作为输入并将数据可视化为几行文本，以后可以将其作为一个整体嵌入到预先存在的 xml/html 页面中。像这样：

我使用回调为最终用户提供了一些交互式过滤器：

@app.callback(
Output(component_id='release_choice', component_property='options'),
[Input(component_id='Tech_choice', component_property='value')])

def get_options(Tech_choice):
    dff = df[df.Technology == Tech_choice]
    return ['label': i, 'value': i for i in dff['SystemRelease'].unique()]

@app.callback(
    Output(component_id='release_choice', component_property='value'),
    [Input(component_id='release_choice', component_property='options')])
def get_values(release_choice):
    return [k['value'] for k in release_choice][1]

@app.callback(
    [Output(component_id='date_choice', component_property='start_date'),
    Output(component_id='date_choice', component_property='end_date')],
    [Input(component_id='release_choice', component_property='value')])
def get_options(date_choice):
    dff = df[df.date2 == date_choice]
    return ['label': i, 'value': i for i in dff['date2']]


@app.callback(Output(component_id='my-graph', component_property='figure'),
              [Input(component_id='release_choice', component_property='value'),
              Input(component_id='Tech_choice', component_property='value'),
              Input(component_id='date_choice', component_property='start_date'),
              Input(component_id='date_choice', component_property='end_date')], )

我使用 pandas 和 plotly 做了一个类似的破折号，看起来像这样：

我使用 fig.write_image 来获取 html 文件，但它只是静态的。那么你的建议是什么？我认为 plotly 不会做预期的工作。我还可以在 python 中使用什么？

【参考方案1】：

你可以使用html的iframe标签：

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

只需将“src”替换为您网站的 URL，这样您就可以将您的 plotly 网站嵌入到任何其他 HTML 页面中。动态元素仍然有效。

【讨论】：

回答！所以只是为了确保我得到它，这会自动将整个仪表板动态地生成到网站上吗？它会像 fig.write_image 但也包含绘图仪表板的所有动态组件？就像我可以在我的网站中将部署的仪表板指定为单独的 html 文档一样？

iframe 将所有 html（包括所有功能）附加到新网站。例如，有两个网站，网站 1 和网站 2 出于某些原因，我想在网站 2 中使用网站 1，所以我可以将其作为 iframe 插入网站 2。如果您使用开发人员工具，您将查看网站 1 的整个 HTML 代码（在您的情况下为 plotly ）将被导入您的网站。

非常感谢。它完全有道理，并为我的一部分工作服务。但是有什么方法可以将仪表板也生成为“静态”XML，因为这也需要转换为 PDF，并且那里只接受 xml，而不是 html。