python plotly dash - 读取 .pkl 文件并以 plotly dash 显示它们

Question

我将以下代码从使用“.png”更改为“.pkl”。但这不起作用

import plotly.express as px
import joblib

#generate example pkl
fig = px.scatter(x=range(10), y=range(10))
joblib.dump(fig, "img_dash/figure.pkl")


#%%
import dash
import dash_core_components as dcc
import dash_html_components as html

import flask
import glob
import os

image_directory = 'img_dash/'
list_of_images = [os.path.basename(x) for x in glob.glob('{}*.pkl'.format(image_directory))]
static_image_route = '/static/'


app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        id='image-dropdown',
        options=[{'label': i, 'value': i} for i in list_of_images],
        value=list_of_images[0]
    ),
    html.Img(id='image')
])

@app.callback(
    dash.dependencies.Output('image', 'src'),
    [dash.dependencies.Input('image-dropdown', 'value')])
def update_image_src(value):
    return static_image_route + value


@app.server.route('{}<image_path>.pkl'.format(static_image_route))
def serve_image(image_path):
    image_name = '{}.pkl'.format(image_path)
    if image_name not in list_of_images:
        raise Exception('"{}" is excluded from the allowed static files'.format(image_path))
    return flask.send_from_directory(image_directory, image_name)

if __name__ == '__main__':
    app.run_server(debug=False)

我希望在具有悬停功能的仪表板中显示 .pkl 文件。可能其他格式也可能！我无法检查这个。

Answer 1

我建议您在这里使用 Graph 组件而不是 Img 组件，因为您希望动态显示这些数字。

由于每个 pkl 文件已经存储了一个 Figure，您可以根据下拉值在回调中使用 joblib 动态加载这些文件。

基于您的代码的示例：

# Example figures for demo purposes
fig1 = px.scatter(x=range(10), y=range(10))
fig2 = px.scatter(x=range(15), y=range(15))
fig3 = px.scatter(x=range(20), y=range(20))
joblib.dump(fig1, "img_dash/figure1.pkl")
joblib.dump(fig2, "img_dash/figure2.pkl")
joblib.dump(fig3, "img_dash/figure3.pkl")

# ...

image_directory = "img_dash/"
list_of_images = [
    os.path.basename(x) for x in glob.glob("{}*.pkl".format(image_directory))
]

app = dash.Dash()

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="image-dropdown",
            options=[{"label": i, "value": i} for i in list_of_images],
            value=list_of_images[0],
        ),
        dcc.Graph(id="graph"),
    ]
)


@app.callback(
    dash.dependencies.Output("graph", "figure"),
    [dash.dependencies.Input("image-dropdown", "value")],
)
def update_graph(file):
    return joblib.load(os.path.join(image_directory, file))
    

if __name__ == "__main__":
    app.run_server(debug=False)

python plotly dash - 读取 .pkl 文件并以 plotly dash 显示它们

python plolty dash - read .pkl files and display them in plotly dash

python

plotly

plotly-dash