python plotly\dash - 在背景中绘制带有图像的数据

Question

在情节manual中有一些例子。但是，在使用破折号时没有关于相同问题的信息。

我试过按照这个例子创建我自己的例子，我没有看到图像

img = plt.imread('link1.png')

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    return fig2

有什么建议可以让我在同一张图上有图像和散点图吗？

Answer 1

如果你想在Dash上的图片引用中引用本地，你需要将其转换为base64格式。我提供的代码可能需要调整大小和位置以适合您的图表。正式地，我提到 this.You may also find this question 有帮助。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import base64

# img = plt.imread('link1.png')
img = base64.b64encode(open('link1.png', 'rb').read())

app = dash.Dash(__name__)

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    fig2.add_layout_image(dict(source='data:image/png;base64,{}'.format(img.decode()),
                               xref="x", 
                               yref="y",
                               x=0,
                               y=3,
                               sizex=2,
                               sizey=2,
                               sizing="stretch",
                               opacity=0.5,
                               layer="below"))
    return fig2

 app.run_server(debug=True)

python plotly\dash - 在背景中绘制带有图像的数据

python plotly\dash - draw data with image in background

python

plotly-dash