如何将交互式仪表板应用程序导出为 html 独立文件以将其嵌入您的网站? [英] How to export an interactive dashboard app into a html standalone file to embed it to your website?

问题描述

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

So I made an interactive dashboard using plotly in python. I deployed the app and converted the visualization plots to the static html files. But what if I want to embed the whole dashboard including the non-static components too. My goal is to develop a simple interactive dashboard which takes csv as input and visualizes the data in couple of lines in text, which can be later embedded as a whole to a pre-existing xml/html page.like this:

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

I have some interactive filters for the end-user using callbacks:

@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 做了一个类似的破折号，如下所示:

I made a similar dash using pandas and plotly which looks like this:

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

I used fig.write_image to get the html file but again its just static. So what are your recommendations? I think plotly will not do the desired job. What else can I use in python?

推荐答案

可以使用html的iframe标签:

You can use iframe tag of html:

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

只需替换src"即可使用您网站的 URL，通过这种方式，您可以将您的情节网站嵌入到任何其他 HTML 页面中.动态元素仍然有效.

just replace the "src" with your website's URL, in that manner you'll get your plotly website embedded in any other HTML page. The dynamic elements will still work.

这篇关于如何将交互式仪表板应用程序导出为 html 独立文件以将其嵌入您的网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！